大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下react兄弟组件调用对方的案例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联为客户提供专业的网站设计、做网站、程序、域名、空间一条龙服务,提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、成都手机网站制作等网站方面业务。最近有一个场景是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(){ 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组件触发一个事件的时候,就可以直接这样调用this.child1.onChange(),Child1组件里面就会直接调用onChange函数,修改text为Child1 onChange;
以上是“react兄弟组件调用对方的案例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!