1.需求

由于在項(xiàng)目開發(fā)過(guò)程中，我們往往時(shí)需要調(diào)用子組件中的方法。例如管理系統(tǒng)中的添加，就需要我們調(diào)用添加表單時(shí)展示的方法。從而實(shí)現(xiàn)頁(yè)面的展示。在vue中我們知道可以給組件上添加ref從而獲取到組件的實(shí)例對(duì)象。那么在React中我們?cè)撛趺崔k呢、

2.頁(yè)面

2.1父組件

下面就是我們的父組件，其實(shí)就是類似于一個(gè)網(wǎng)站的頭部，當(dāng)我們點(diǎn)擊用戶登錄時(shí)，就需要將我們寫登錄邏輯的頁(yè)面展示出來(lái)。因此我們就需要調(diào)用對(duì)應(yīng)的Ref從而幫助我們操作對(duì)應(yīng)的子組件的方法。

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://syt.atguigu.cn/_nuxt/img/logo.7086376.png" alt="網(wǎng)站loge" style={{width:'50px'}}/>
<span className='text link'>尚醫(yī)通 預(yù)約掛號(hào)統(tǒng)一平臺(tái)</span>
</div>
<div className="right-wrapper fx jb">
<span className='link-to'>幫助中心</span>
<span className='link-to' onClick={userLogin}>登錄注冊(cè)</span>
<Child ref={ModelRef}></Child>
</div>
</div>
</div>
)
}

2.2 子組件

這里的子組件就超級(jí)簡(jiǎn)單了，我們就只是在這里定義了一個(gè)彈窗從而實(shí)現(xiàn)登錄的邏輯。這里就只是簡(jiǎn)單的將子組件中的彈出的方法暴露給父組件，從而讓父組件點(diǎn)擊登錄的時(shí)候可以展開我們對(duì)應(yīng)的子組件。

const Child = forwardRef<IFnChildInstance>((props,ref) => {
const [isModalOpen, setIsModalOpen] = useState(false);
useImperativeHandle(ref, () => ({
showModal, //（實(shí)際等于： 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.實(shí)現(xiàn)邏輯

3.1 父組件中構(gòu)建ref

由于我們需要獲取到對(duì)應(yīng)的子組件的ref，因此我們首先需要在父組件中獲取到對(duì)應(yīng)的。由于我們這里定義的是函數(shù)式組件，因此在這里我們就使用了對(duì)應(yīng)的hooks，如useRef。因?yàn)檫@里我們使用了TS，因此我們對(duì)創(chuàng)建的Ref進(jìn)行了類型的限制。

const ModelRef = useRef<IFnChildInstance>(null)

因?yàn)樵谶@里我們主要是獲取子組件中打開彈窗的方法，因此我們采取的是只是暴露方法，而不需要將DOM元素暴露出來(lái)。因此其中的IFnChildInstance就是我們定義的接口類型。其中的showModal的類型是一個(gè)無(wú)返回值的函數(shù)。然后我們將定義好的ref放在對(duì)應(yīng)的組件，到這里我們的父組件中所實(shí)現(xiàn)的相關(guān)操作已經(jīng)完成了。

interface IFnChildInstance {
        showModal: () => void,
}
//組件引用的地方
<Child ref={ModelRef}></Child>

3.2子組件中的相關(guān)操作

首先我們需要使用的是forwardRef來(lái)進(jìn)行向外暴露。下面是官方文檔中對(duì)其的介紹。

forwardRef 允許你的組件使用 ref 將一個(gè) DOM 節(jié)點(diǎn)暴露給父組件。

forwardRef(render)

使用 forwardRef() 來(lái)讓你的組件接收一個(gè) ref 并將其傳遞給一個(gè)子組件：

import { forwardRef } from 'react';
const MyInput = forwardRef(function MyInput(props, ref) {
// ...
});

• props：父組件傳遞過(guò)來(lái)的參數(shù)。
• ref：父組件傳遞的 ref 屬性。ref 可以是一個(gè)對(duì)象或函數(shù)。如果父組件沒(méi)有傳遞一個(gè) ref，那么它將會(huì)是 null。你應(yīng)該將接收到的 ref 轉(zhuǎn)發(fā)給另一個(gè)組件，或者將其傳遞給 useImperativeHandle。
• 對(duì)應(yīng)的官方文檔的鏈接如下，需要的可以跳轉(zhuǎn)過(guò)去仔細(xì)查看forwardRef – React

回歸正題，我們這里就使用forwardRef來(lái)進(jìn)行對(duì)應(yīng)的創(chuàng)建。代碼如下。由于我們?cè)诟附M件中傳遞的ref所對(duì)應(yīng)的類型是IFnChildInstance，因此我們?cè)谶@里接收的時(shí)候也要進(jìn)行變量類型的生命。然后由于我們子組件只需要將其對(duì)應(yīng)的方法暴露給父組件中操作，而不是將整個(gè)DOM元素給父組件，因此我們可以使用useImperativeHandle來(lái)進(jìn)行操作。其中對(duì)應(yīng)的具體使用方法可以點(diǎn)擊上面的連接進(jìn)行查看。這里就只是簡(jiǎn)單闡述了，第一個(gè)參數(shù)接收的是函數(shù)傳遞的ref，第二個(gè)使我們想向外暴露的方法。該參數(shù)的類型是一個(gè)函數(shù)，因此這里我們就使用了賦值的心事。第三個(gè)參數(shù)是一個(gè)數(shù)組，具體的使用方法還請(qǐng)查看官方文檔。然后我們還需要在子組件中定義所傳遞給父組件中的方法。注意的是其函數(shù)的類型要和我們所定義的ref的類型一樣，否則TS會(huì)給我們報(bào)錯(cuò)提示。

const Child = forwardRef<IFnChildInstance>((props,ref) => {
const [isModalOpen, setIsModalOpen] = useState(false);
useImperativeHandle(ref, () => ({
showModal, //（實(shí)際等于： 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.父組件使用

然后我們就可以通過(guò)父組件中定義的接口useRef的變量中的.current屬性來(lái)獲取我們子組件中傳遞返回的對(duì)象，其中就是我們所定義返回的函數(shù)。然后我們就只需要在合適的地方將其調(diào)用即可。

const ModelRef = useRef<IFnChildInstance>(null)
  const ChildrenFn = ModelRef.current!
  function userLogin(){
    ChildrenFn.showModal()
   console.log(ChildrenFn.showModal)

5.總結(jié)

首先我們需要使用useRef來(lái)創(chuàng)建對(duì)應(yīng)的ref的值，但是我們需要給對(duì)應(yīng)的值定義接口。其中接口的信息就是我們想往外暴露的值

然后再對(duì)應(yīng)的組件上使用ref來(lái)進(jìn)行獲取對(duì)應(yīng)的標(biāo)簽

然后在子組件中我們需要使用forwardRef向外暴露一個(gè)可操作的ref。其中的值為props和ref，分別與之對(duì)父組件傳遞值時(shí)的接口

useImperativeHandle(ref,()=>{({})},[])的形式只是暴露我們所需要的方法或者參數(shù)，其他的就不用暴露給父組件，這樣方便于我們操作

然后就完成了操作子組件的相關(guān)方法。

該總結(jié)只是作為我剛使用TS完成父子組件調(diào)用值?？赡軙?huì)有啥總結(jié)的不正確或者文章中有啥錯(cuò)誤也可以指出討論。共同進(jìn)步

到此這篇關(guān)于React中使用TS完成父組件調(diào)用子組件的文章就介紹到這了,更多相關(guān)React父組件調(diào)用子組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論