react 组件通讯的几种方式

咿呀咿呀哟 - 2021-07-30 12:46:34

---

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

父子通讯-父组件传递信息给子组件子父通信-子组件传递信息给父组件兄弟通信-兄弟组件相互通讯父子通讯

这是最简单的一种通讯方式,在父组件调用子组件的地方添加相应的属性传递,然后在子组件中通过 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'))

子父通讯

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

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

以下是简单代码实现:

// 父组件
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'))

兄弟组件

这个方式的通讯比上面两种都稍微复杂一些,具体思路就是 状态提升
将共享状态提升到公共父组件中,由父组件负责管理这个状态
公共父组件职责:

提供共享状态提供操作共享状态的方法

下面是我实现的简单代码:

/*
  兄弟组件通信
    共享的状态提升到父组件中
    父组件中还需要提供更新状态的方法
*/

// 父组件
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>
}

好了,以上就是看完组件通讯的总结~~欢迎大神们指正

Tags 标签

前端react.jses6html5node.js

扩展阅读