React兄弟组件之间通信

兄弟组件之间通信

React是只有单项数据流动模式，也就是只能父组件的数据传递给子组件，而没有办法将子组件的数据传递给父组件。那么如果想要两个子兄弟组件通信该怎么办呢？

答案是可以通过子组件向父组件推送信息或者触发事件，然后父组件的状态会发生更新。传递到子组件的数据也会发生更改。这样两个兄弟组件就可以通过公有父组件实现通信。

让我们来去举一个具体例子，我们有一个counter组件来实现计数功能，样式大致是这样的：

公有父组件可以写成这样：

import React from 'react' import Display from './display' import Buttons from './buttons'class Counter extends React.Component {constructor(props) {super(props)this.state = {counter: 0,}this.handleIncrement = this.handleIncrement.bind(this)this.handleDecrement = this.handleDecrement.bind(this)}handleIncrement() {this.setState({counter: this.state.counter + 1,})}handleDecrement() {this.setState({counter: this.state.counter - 1,})}render() {return (<div><Display counter={this.state.counter} /><ButtonsonDecrement={this.handleDecrement}onIncrement={this.handleIncrement}/></div>)}}export default Counter

可以看到这个公共父组件的功能是控制state的状态更改，然后把state的状态传递到Display中。下面我们来看看Button组件实现的功能：

import React from 'react'const Buttons = ({ onDecrement, onIncrement }) => (<div><button onClick={onDecrement}>-</button><button onClick={onIncrement}>+</button></div> )Buttons.propTypes = {onDecrement: React.PropTypes.func,onIncrement: React.PropTypes.func, }export default Buttons

我们将计数器的counter点击放在了子组件Buttons组件中了。当子组件需要向父组件推送信息或触发事件时，React通常采用回调函数来实现。这样，当我们点击按钮时，触发的不是Buttons里的内部函数，而是触发props上传来的函数。这是一个简单的无状态函数组件，其内部的onClick事件处理器会触发props上的函数。这样具体逻辑在父组件中，Buttons本身的逻辑就会变得很纯粹。当被点击时，他们只能通知自身拥有者。

因此，每当子组件需要向父组件推送数据或者通知父组件发生了什么事时，可以传递回调函数，同时将其余逻辑放在父组件中。

最后成Display组件：

import React from 'react'const Display = ({ counter }) => <h1>{counter}</h1>Display.propTypes = {counter: React.PropTypes.number, }export default Display

每当需要让两个没有关联的组件相互通信时，都需要找到它们的公有父组件来保存状态。这样，每当状态更新时，两个组件都能从props接收新数据。

总结

以上是生活随笔为你收集整理的React兄弟组件之间通信的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。