react兄弟组件如何调⽤对⽅的⽅法
最近有⼀个场景是Child2组件点击让Child1组件⾥⾯的state的值发⽣改变,Child1是⼀个公⽤组件，把⾥⾯的state值改为props传递，修改内容太多，容易出错，就想其他的⽅法来解决兄弟组件调⽤⽅法问题，下⾯看代码:
Child1 是第⼀个⼦组件
class Child1 extends React.Component {
constructor(props) {
super(props);
this.state = {
text:'Child1'
};
}
onChange=()=>{
this.setState({
text:'Child1 onChange'
})
}
componentDidMount(){
Ref&&Ref(this)
}
render() {
return (
<div>{}</div>
)
;
}
}
是第⼆个⼦组件，和Child1是兄弟组件;
class Child2 extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div onClick={Click}>Child2</div>
);
}
}
home ⽗组件
class Home extends React.Component {
react组件之间通信constructor(props) {
super(props);
this.state = {
};
}
onRef=(ref)=>{
this.child1=ref;
}
render() {
return (
<div className="home">
<Child1 onRef={Ref}/>
<Child2 onClick={
()=>{
Change&&Change()
}
} />
</div>
);
}
}
分析
第⼀步：在Child1组件的componentDidMount⽣命周期⾥⾯加上Ref(this)，把Child1都传递给⽗组件，
第⼆步⽗组件⾥⾯ <Child1 onRef={Ref}/> Ref⽅法为onRef=(ref)=>{this.child1=ref;};
第三步 Child2组件触发⼀个事件的时候，就可以直接这样调⽤Change(),Child1组件⾥⾯就会直接调⽤onChange函数，修改text为Child1 onChange;
到这⾥就可以实现调⽤兄弟组件，其实还是⽤⽗组件做了中间传递。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。