react|react 组件通讯的几种方式 react组件通讯的几种方式

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

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

父子通讯这是最简单的一种通讯方式,在父组件调用子组件的地方添加相应的属性传递,然后在子组件中通过 props 接收传递的参数信息
如下:

// 父组件 class Parent extends React.Component { state = { name: this.props.name, age: this.props.age } render() { return (我是父组件盒子 ) } }

// 子组件 const Child = (props) => { return 我是子组件盒子姓名：{props.name} 年龄：{props.age}} ReactDOM.render(, document.getElementById('root'))

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

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

以下是简单代码实现:

// 父组件 class Parent extends React.Component { // 提供回调函数，用于接收子组件传递过来的数据 state = { name: '' } getChildMsg = data => { console.log('子组件传递过来的信息是： '+ data) this.setState({ name: data }) } render() { return (我是父组件盒子姓名：{this.state.name} 年龄： ) } }

// 子组件 class Child extends React.Component { state = { name: 'yiyi', } handleClick = () => { this.props.getMsg(this.state.name) } render() { return (我是子组件盒子 ) } } ReactDOM.render(【react|react 组件通讯的几种方式】, document.getElementById('root'))

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

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

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

/* 兄弟组件通信共享的状态提升到父组件中父组件中还需要提供更新状态的方法 */// 父组件 class Counter extends React.Component { // 提供共享状态 state = { count: 0 } // 提供修改状态的方法 handleAdd = () => { this.setState({count: this.state.count + 1}) } render() { return ( ) } }