ReactJs 连接 2 个子组件答案

【问题标题】：ReactJs connect 2 child componentsReactJs 连接 2 个子组件
【发布时间】：2019-06-10 14:30:39
【问题描述】：

如果在 Angular 2 中可以将两个子组件相互连接起来，那么在 react js 中如何管理？

【问题讨论】：

一般来说，你可以使用父组件的状态或者使用redux等状态管理库在2个兄弟组件之间传递数据。

标签： javascript angular reactjs

【解决方案1】：

A) 您可以使用 Redux 或 Flux 为整个应用程序保留一个状态，您可以从您决定与此状态连接的任何组件（称为 Store）访问该状态。

您可以在https://github.com/reduxjs/redux 中阅读更多相关信息。

B) 如果两个组件都是兄弟组件，并且您尝试共享的状态不是您在应用程序的其余部分中关心的内容，您可以将状态从父组件传递给两个子组件，作为道具，并且还传递一个函数，允许孩子设置父母的状态。

例如：

class Parent extends Component {
  state = {
    something: '',
  }

  changeSomething = (e) => {
    this.setState({
      something: e.target.value,
    })
  }

  render() {
    const { something, changeSomething } = this.state;
    return(
      <div>
        <ChildrenA
          something={something}
          changeSomething={changeSomething}
        >
        <ChildrenB
          something={something}
          changeSomething={changeSomething}
        >
      </div>
    );
}

现在两个孩子都可以访问this.props.something 和this.props.changeSomething，并且他们都可以更改父母的状态，并且都会看到更改。

希望对你有帮助

【讨论】：

非常感谢，@andresmechali