目錄
- 1.需求
- 2.頁面
- 2.1父組件
- 2.2 子組件
- 3.實現邏輯
- 3.1 父組件中構建ref
- 3.2子組件中的相關操作
- 4.父組件使用
- 5.總結
1.需求
由于在項目開發過程中，我們往往時需要調用子組件中的方法。例如管理系統中的添加，就需要我們調用添加表單時展示的方法。從而實現頁面的展示。在vue中我們知道可以給組件上添加ref從而獲取到組件的實例對象。那么在React中我們該怎么辦呢、
2.頁面
2.1父組件
下面就是我們的父組件，其實就是類似于一個網站的頭部，當我們點擊用戶登錄時，就需要將我們寫登錄邏輯的頁面展示出來。因此我們就需要調用對應的Ref從而幫助我們操作對應的子組件的方法。
const WebHeader = () => {
const ModelRef = useRef<IFnChildInstance>(null)
const ChildrenFn = ModelRef.current!
function userLogin(){
ChildrenFn.showModal()
console.log(ChildrenFn.showModal)
}
return (
<div className="header-container fx fa">
<div className="wrapper fx jb fa">
<div className="left-wrapper fx fa">
<img src="http://img.558idc.com/uploadfile/allimg/js1/logo.708.jpg" alt="網站loge" style={{width:'50px'}}/>
<span className='text link'>尚醫通 預約掛號統一平臺</span>
</div>
<div className="right-wrapper fx jb">
<span className='link-to'>幫助中心</span>
<span className='link-to' onClick={userLogin}>登錄注冊</span>
<Child ref={ModelRef}></Child>
</div>
</div>
</div>
)
}
2.2 子組件
這里的子組件就超級簡單了，我們就只是在這里定義了一個彈窗從而實現登錄的邏輯。這里就只是簡單的將子組件中的彈出的方法暴露給父組件，從而讓父組件點擊登錄的時候可以展開我們對應的子組件。
const Child = forwardRef<IFnChildInstance>((props,ref) => {
const [isModalOpen, setIsModalOpen] = useState(false);
useImperativeHandle(ref, () => ({
showModal, //（實際等于： resetSharePopup：resetSharePopup）
}));
function showModal(){
setIsModalOpen(true);
};
return(
<Modal title="Basic Modal" open={isModalOpen}>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
)
})
3.實現邏輯
3.1 父組件中構建ref
由于我們需要獲取到對應的子組件的ref，因此我們首先需要在父組件中獲取到對應的。由于我們這里定義的是函數式組件，因此在這里我們就使用了對應的hooks，如useRef。因為這里我們使用了TS，因此我們對創建的Ref進行了類型的限制。
const ModelRef = useRef<IFnChildInstance>(null)
因為在這里我們主要是獲取子組件中打開彈窗的方法，因此我們采取的是只是暴露方法，而不需要將DOM元素暴露出來。因此其中的IFnChildInstance就是我們定義的接口類型。其中的showModal的類型是一個無返回值的函數。然后我們將定義好的ref放在對應的組件，到這里我們的父組件中所實現的相關操作已經完成了。
interface IFnChildInstance {
showModal: () => void,
}
//組件引用的地方
<Child ref={ModelRef}></Child>
3.2子組件中的相關操作
首先我們需要使用的是forwardRef來進行向外暴露。下面是官方文檔中對其的介紹。
forwardRef 允許你的組件使用 ref 將一個 DOM 節點暴露給父組件。
forwardRef(render)
使用 forwardRef() 來讓你的組件接收一個 ref 并將其傳遞給一個子組件：
import { forwardRef } from 'react';
const MyInput = forwardRef(function MyInput(props, ref) {
// ...
});
-
props：父組件傳遞過來的參數。 -
ref：父組件傳遞的ref屬性。ref可以是一個對象或函數。如果父組件沒有傳遞一個 ref，那么它將會是null。你應該將接收到的ref轉發給另一個組件，或者將其傳遞給 useImperativeHandle。 - 對應的官方文檔的鏈接如下，需要的可以跳轉過去仔細查看forwardRef – React
回歸正題，我們這里就使用forwardRef來進行對應的創建。代碼如下。由于我們在父組件中傳遞的ref所對應的類型是IFnChildInstance，因此我們在這里接收的時候也要進行變量類型的生命。然后由于我們子組件只需要將其對應的方法暴露給父組件中操作，而不是將整個DOM元素給父組件，因此我們可以使用useImperativeHandle來進行操作。其中對應的具體使用方法可以點擊上面的連接進行查看。這里就只是簡單闡述了，第一個參數接收的是函數傳遞的ref，第二個使我們想向外暴露的方法。該參數的類型是一個函數，因此這里我們就使用了賦值的心事。第三個參數是一個數組，具體的使用方法還請查看官方文檔。然后我們還需要在子組件中定義所傳遞給父組件中的方法。注意的是其函數的類型要和我們所定義的ref的類型一樣，否則TS會給我們報錯提示。
const Child = forwardRef<IFnChildInstance>((props,ref) => {
const [isModalOpen, setIsModalOpen] = useState(false);
useImperativeHandle(ref, () => ({
showModal, //（實際等于： resetSharePopup：resetSharePopup）
}));
function showModal(){
setIsModalOpen(true);
};
return(
<Modal title="Basic Modal" open={isModalOpen}>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
)
})
4.父組件使用
然后我們就可以通過父組件中定義的接口useRef的變量中的.current屬性來獲取我們子組件中傳遞返回的對象，其中就是我們所定義返回的函數。然后我們就只需要在合適的地方將其調用即可。
const ModelRef = useRef<IFnChildInstance>(null)
const ChildrenFn = ModelRef.current!
function userLogin(){
ChildrenFn.showModal()
console.log(ChildrenFn.showModal)
5.總結
首先我們需要使用useRef來創建對應的ref的值，但是我們需要給對應的值定義接口。其中接口的信息就是我們想往外暴露的值
然后再對應的組件上使用ref來進行獲取對應的標簽
然后在子組件中我們需要使用forwardRef向外暴露一個可操作的ref。其中的值為props和ref，分別與之對父組件傳遞值時的接口
useImperativeHandle(ref,()=>{({})},[])的形式只是暴露我們所需要的方法或者參數，其他的就不用暴露給父組件，這樣方便于我們操作
然后就完成了操作子組件的相關方法。
該總結只是作為我剛使用TS完成父子組件調用值。可能會有啥總結的不正確或者文章中有啥錯誤也可以指出討論。共同進步
到此這篇關于React中使用TS完成父組件調用子組件的文章就介紹到這了,更多相關React父組件調用子組件內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！