最近有一個場景是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 (   <div>{this.state.text}</div>  ); }}

是第二個子組件，和Child1是兄弟組件;

class Child2 extends React.Component { constructor(props) {  super(props);  this.state = {  }; } render() {  return (   <div onClick={this.props.onClick}>Child2</div>  ); }}

home 父組件

class Home extends React.Component { constructor(props) {  super(props);  this.state = {  }; } onRef=(ref)=>{  this.child1=ref; } render() {  return (   <div className="home">    <Child1 onRef={this.onRef}/>    <Child2 onClick={     ()=>{      this.child1.onChange&&this.child1.onChange()     }    } />    </div>  ); }}

分析

到這里就可以實現調用兄弟組件，其實還是用父組件做了中間傳遞。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。