如何在不使用父级组件的情况下直接在两个React兄弟组件之间进行通信？

Question

我有一个父组件C，它是两个子A和B。假设我在B组件中进行计算后得到了一些数据，我想直接传递给A组件而不使用父组件C。

我该怎么做以及有多少种方法？ 这对redux或Context API有帮助吗？

Answer 1

是的，您可以在此处使用redux与组件A通信，而无需使用父组件。将数据从组件B传递到动作创建者，然后该动作创建者将动作分派给reducer。 reducer将返回可以从组件A访问的状态（现在保存数据）。您需要将A和B都连接到redux存储。

假设您希望组件A中的“数据”也可以在组件B中访问。

class A extends React.Component{
  //call this.props.actionCreator and pass it the data
}
export default connect(null, actionCreators)(A)

动作创建者接收数据，将其包装在一个动作中，然后分派给reducer。 reducer返回数据，该数据成为状态的一部分。

class B extends React.Component{
  //We can access data as this.props.data here
}
function mapDispatchToProps(state) {
   return {data: state.LoginReducer.data};
}
export default connect(mapDispatchToProps, actionCreators)(B)

然后，我们在mapDispatchToProps中指定所需的状态，并将其传递给连接帮助器。连接帮助器使数据作为组件B中的this.props.data可用。

我希望我解释得足够好。

Answer 2

如果您不想将状态提升到父级，那么redux或Context API都是不错的选择，但是，如果您尚未使用redux然后在您的项目中建议使用Context API，

• redux附带了很多样板代码，仅将redux用于两个组件是过分的。
• redux存储对于您的项目是全局的，如果您只想使用Context API在两个同级之间共享数据，则可以使用Context Provider
包装它们