react 兄弟组件如何调用对方的方法示例

Posted xanthedsf

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 兄弟组件如何调用对方的方法示例相关的知识,希望对你有一定的参考价值。

最近有一个场景是Child2组件点击让Child1组件里面的state的值发生改变,Child1是一个公用组件,把里面的state值改为props传递,修改内容太多,容易出错,就想找其他的方法来解决兄弟组件调用方法问题,下面看代码:

Child1 是第一个子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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是兄弟组件;

1
2
3
4
5
6
7
8
9
10
11
12
13
class Child2 extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
  };
 }
 
 render() {
  return (
   <div onClick={this.props.onClick}>Child2</div>
  );
 }
}

home 父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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>
  );
 }
}

分析

  • 第一步:在Child1组件的componentDidMount生命周期里面加上this.props.onRef(this),把Child1都传递给父组件,
  • 第二步父组件里面 <Child1 onRef={this.onRef}/> this.onRef方法为onRef=(ref)=>{this.child1=ref;};
  • 第三步 Child2组件触发一个事件的时候,就可以直接这样调用this.child1.onChange(),Child1组件里面就会直接调用onChange函数,修改text为Child1 onChange;

到这里就可以实现调用兄弟组件,其实还是用父组件做了中间传递。

 

下一页 ?

以上是关于react 兄弟组件如何调用对方的方法示例的主要内容,如果未能解决你的问题,请参考以下文章

兄弟组件怎么粘在一起css

[react] react兄弟组件如何通信?

React组件间通信

react:在一个组件中调用别的组件中的方法

React7.组件间的通讯

React7.组件间的通讯