您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“React父組件如何調(diào)用子組件”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
調(diào)用方法:1、類組件中的調(diào)用可以利用React.createRef()、ref的函數(shù)式聲明或props自定義onRef屬性來實現(xiàn);2、函數(shù)組件、Hook組件中的調(diào)用可以利用useImperativeHandle或forwardRef拋出子組件ref來實現(xiàn)。
在React中,我們經(jīng)常在子組件中調(diào)用父組件的方法,一般用props回調(diào)即可。但是有時候也需要在父組件中調(diào)用子組件的方法,通過這種方法實現(xiàn)高內(nèi)聚。有多種方法,請按需服用。
優(yōu)點:通俗易懂,用ref指向。
缺點:使用了HOC的子組件不可用,無法指向真是子組件
比如一些常用的寫法,mobx的@observer包裹的子組件就不適用此方法。
import React, { Component } from 'react';
class Sub extends Component {
callback() {
console.log('執(zhí)行回調(diào)');
}
render() {
return <div>子組件</div>;
}
}
class Super extends Component {
constructor(props) {
super(props);
this.sub = React.createRef();
}
handleOnClick() {
this.sub.callback();
}
render() {
return (
<div>
<Sub ref={this.sub}></Sub>
</div>
);
}
}
優(yōu)點:ref寫法簡潔
缺點:使用了HOC的子組件不可用,無法指向真是子組件(同上)
使用方法和上述的一樣,就是定義ref的方式不同。
...
<Sub ref={ref => this.sub = ref}></Sub>
...
優(yōu)點:假如子組件是嵌套了HOC,也可以指向真實子組件。
缺點:需要自定義props屬性
import React, { Component } from 'react';
import { observer } from 'mobx-react'
@observer
class Sub extends Component {
componentDidMount(){
// 將子組件指向父組件的變量
this.props.onRef && this.props.onRef(this);
}
callback(){
console.log("執(zhí)行我")
}
render(){
return (<div>子組件</div>);
}
}
class Super extends Component {
handleOnClick(){
// 可以調(diào)用子組件方法
this.Sub.callback();
}
render(){
return (
<div>
<div onClick={this.handleOnClick}>click</div>
<Sub onRef={ node => this.Sub = node }></Sub>
</div>)
}
}
優(yōu)點: 1、寫法簡單易懂 2、假如子組件嵌套了HOC,也可以指向真實子組件
缺點: 1、需要自定義props屬性 2、需要自定義暴露的方法
import React, { useImperativeHandle } from 'react';
import { observer } from 'mobx-react'
const Parent = () => {
let ChildRef = React.createRef();
function handleOnClick() {
ChildRef.current.func();
}
return (
<div>
<button onClick={handleOnClick}>click</button>
<Child onRef={ChildRef} />
</div>
);
};
const Child = observer(props => {
//用useImperativeHandle暴露一些外部ref能訪問的屬性
useImperativeHandle(props.onRef, () => {
// 需要將暴露的接口返回出去
return {
func: func,
};
});
function func() {
console.log('執(zhí)行我');
}
return <div>子組件</div>;
});
export default Parent;
使用forwardRef拋出子組件的ref
這個方法其實更適合自定義HOC。但問題是,withRouter、connect、Form.create等方法并不能拋出ref,假如Child本身就需要嵌套這些方法,那基本就不能混著用了。forwardRef本身也是用來拋出子元素,如input等原生元素的ref的,并不適合做組件ref拋出,因為組件的使用場景太復雜了。
import React, { useRef, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';
import { observer } from 'mobx-react'
const FancyInput = React.forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} type="text" />
});
const Sub = observer(FancyInput)
const App = props => {
const fancyInputRef = useRef();
return (
<div>
<FancyInput ref={fancyInputRef} />
<button
onClick={() => fancyInputRef.current.focus()}
>父組件調(diào)用子組件的 focus</button>
</div>
)
}
export default App;
“React父組件如何調(diào)用子組件”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。