小編給大家分享一下react兄弟組件調(diào)用對方的案例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
最近有一個場景是Child2組件點擊讓Child1組件里面的state的值發(fā)生改變，Child1是一個公用組件，把里面的state值改為props傳遞，修改內(nèi)容太多，容易出錯，就想找其他的方法來解決兄弟組件調(diào)用方法問題，下面看代碼：
Child1 是第一個子組件
重慶分公司
重慶分公司
class Child1 extends React.Component {
constructor(props) {
super(props);
this.state = {
text:'Child1'
};
}
onChange=()=>{
this.setState({
text:'Child1 onChange'
})
}
componentDidMount(){
this.props.onRef&&this.props.onRef(this)
}
render() {
return (
{this.state.text}
);
}
}是第二個子組件，和Child1是兄弟組件;
class Child2 extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
Child2 home 父組件
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
onRef=(ref)=>{
this.child1=ref;
}
render() {
return (
{
this.child1.onChange&&this.child1.onChange()
}
} />
分析
第一步：在Child1組件的componentDidMount生命周期里面加上this.props.onRef(this),把Child1都傳遞給父組件，
第二步父組件里面
第三步 Child2組件觸發(fā)一個事件的時候，就可以直接這樣調(diào)用this.child1.onChange(),Child1組件里面就會直接調(diào)用onChange函數(shù),修改text為Child1 onChange;
以上是“react兄弟組件調(diào)用對方的案例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
