关于前端:react-组件通讯的几种方式

最近在做 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>
    )
  }
}

// 子组件 1
const Child1 = (props) => {return <h1> 计数器:{props.count}</h1>
}
// 子组件 2
const Child2 = (props) => {
  // 调用父组件的加一办法
  return <button onClick={() => props.add()}> 点我加一 </button>
}

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