在 React.js 中的组件之间传递消息

Question

我对 React.js 组件之间的通信有一些疑问。这是在不使用 redux 的情况下。这是我的组件层次结构的样子。

       App
      /  \
     /    \
    |      |
    ▼      ▼
 Board   Dashboard
   |
   ▼ 
 Cell

以下是我用于组件通信的一些假设/模式。

1. 如果我们需要将消息从父组件传递给子组件 我们使用道具来做到这一点的组件。例如，在创建一个 板我们传递行，列作为道具。

   <Board rows={5} cols={5} />
   

2. 如果我们需要将消息从子组件传递给父组件 我们通过传递回调来完成组件。例如我们通过一个 从 Board 到 Cell 的 play() 回调。在 Cell 中，我们设置 onClick 处理程序作为传递的回调，即 play()。

   <Cell onClick={this.props.play(this.props.id)} />
   

3. 我有一个悬而未决的问题是如何在兄弟姐妹之间传递消息 组件（例如仪表板到单元格）。一个用例是重置我的 仪表板组件中的重置按钮时的板组件 点击。这是仪表板中的重置按钮的外观。我的 问题是一旦重置消息到达 App 组件，什么是 将其传递给董事会的最佳做法？

   <input type="button" value="reset" onClick={this.props.reset} />
   

如果能获得关于 1 和 2 的一些反馈，那就太好了。另外，3 的最佳做法。

Answer 1

Redux

这正是 Redux 如此酷的原因。如果你使用 Redux，那么所有这些组件都有一个共同点；他们都在从应用程序状态读取它们的值。我将使用的流程如下：

1. 用户点击仪表板组件中的重置按钮

2. 与该点击关联的函数只做一件事。调度“RESET_BOARD”操作

3. 在 reducer 中，RESET_BOARD 操作会重置板的状态。

4. 当重新渲染发生时，board 是传入 props 的，和之前一样，只传入空状态。

没有 Redux

如果您手头没有 redux，那么来自父级的回调方法是明智的选择。如果您在 App 组件中维护状态，则应用程序会重置其状态并手动触发重新渲染。这将导致 Board 使用不同的道具重新渲染。

Answer 2

而且，也是限制；两个组件之间的通信在 3 种情况下受到限制：

1. 父更新子：

2. 子更新父：

3. 兄弟姐妹（兄弟）互相更新（兄弟）

---

现在让我们找到您的问题.. 你的问题是关于第三种情况：

主要思想是让祖父母（App）作为代理传输通信。

---

               App
               /  \
              /    \
             |      |
             ▼      ▼
          Board   Dashboard
            |
            ▼ 
          Cell

仪表板.js

reset(event) {
  //.... local calls (concerning Dashboard or its children )
 // then , external calls (concerning outside Dashboard)
 if(this.props.onReset) this.props.onReset(event);
}

<input type="button" value="reset" onClick={this.reset} />

App.js（[Dashboard, Board>Cell] 之间的 1ˢᵗ 祖父母）：

onDashboardReset(event) {
  this.setState({dashboardIsReset: true})
}

<Dashboard   onReset={this.onDashboardReset} />
<Board   dashboardIsReset={this.state.dashboardIsReset} />

Board.js：

   // ... has props  `dashboardIsReset` and forward it to its children (`Cell`) if needed