最近在做react我的项目,所以简略的学习了一下组件之间的通信形式.总结来说可分为三大类:

  1. 父子通信-父组件传递信息给子组件
  2. 子父通信-子组件传递信息给父组件
  3. 兄弟通信-兄弟组件互相通信

父子通信

这是最简略的一种通信形式,在父组件调用子组件的中央增加相应的属性传递,而后在子组件中通过 props 接管传递的参数信息
如下:

// 父组件class Parent extends React.Component {  state = {    name: this.props.name,    age: this.props.age  }  render() {    return (      <div style={{backgroundColor:'blue',height:'200px'}}>        我是父组件盒子        <Child name={this.state.name} age={this.state.age}/>      </div>    )  }}
// 子组件const Child = (props) => {  return <div style={{backgroundColor:'skyblue'}}>    我是子组件盒子    <span>姓名：{props.name}</span><br/>    <span>年龄：{props.age}</span>  </div>}ReactDOM.render(<Parent name='李四' age={19}/>, document.getElementById('root'))

子父通信

这类通信相比父子通信要繁琐一些,具体步骤如下:

  1. 在父组件提供回调函数
  2. 在父组件中将回调函数做为参数传递给子组件
  3. 子组件通过 this.props 并通过参数调用父组件提供的回调函数
  4. 父组件顺利接管到子组件传递过去的数据

以下是简略代码实现:

// 父组件class Parent extends React.Component {  // 提供回调函数，用于接管子组件传递过去的数据  state = {    name: ''  }    getChildMsg = data => {        console.log('子组件传递过去的信息是： '+ data)        this.setState({ name: data })    }    render() {        return (            <div style={{ backgroundColor: 'skyblue', height: '200px' }}>                我是父组件盒子<br />                <span>姓名：{this.state.name}</span>                <br />                <span>年龄：</span>                <Child getMsg={this.getChildMsg} />            </div>        )    }}
// 子组件class Child extends React.Component {    state = {        name: 'yiyi',    }    handleClick = () => {    this.props.getMsg(this.state.name)    }    render() {        return (            <div style={{ backgroundColor: 'pink' }}>                我是子组件盒子                <input type="button" value="点我给父组件传递信息" onClick={this.handleClick}/>            </div>        )    }}ReactDOM.render(<Parent />, document.getElementById('root'))

兄弟组件

这个形式的通信比下面两种都略微简单一些,具体思路就是 状态晋升
将共享状态晋升到公共父组件中,由父组件负责管理这个状态
公共父组件职责:

  1. 提供共享状态
  2. 提供操作共享状态的办法

上面是我实现的简略代码:

/*  兄弟组件通信    共享的状态晋升到父组件中    父组件中还须要提供更新状态的办法*/// 父组件class Counter extends React.Component {  // 提供共享状态  state = {    count: 0  }  // 提供批改状态的办法  handleAdd = () => {    this.setState({count: this.state.count + 1})  }  render() {    return (      <div>        <Child1 count={this.state.count}/>        <Child2 add={this.handleAdd}/>      </div>    )  }}
// 子组件1const Child1 = (props) => {  return <h1>计数器:{props.count}</h1>}// 子组件2const Child2 = (props) => {  // 调用父组件的加一办法  return <button onClick={() => props.add()}>点我加一</button>}

好了,以上就是看完组件通信的总结~~欢送大神们斧正