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

Question

我有几个关于 React.js 组件之间通信的问题。这是在不使用 redux 的情况下。这是我的组件层次结构。

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

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

1. 如果我们需要将消息从父组件传递给子组件 组件我们使用 Prop 来做到这一点。例如，在创建一个 Board 我们传递 rows, cols 作为 Prop 。

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

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

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

3. 我的悬而未决的问题是如何在 sibling 之间传递消息 组件(例如 Dashboard 到 Cell)。一个用例是重置我的 当 Dashboard 组件中的重置按钮为 Board 组件时 点击。这是仪表板中的重置按钮的样子。我的 问题是，一旦重置消息到达 App 组件， 将其传递给董事会的最佳做法？

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

如果能得到关于 1 和 2 的一些反馈会很棒。此外，还有 3 的最佳实践。

Answer 1

终极版

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

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

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

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

4. 当重新渲染发生时，板被传入 props，就像以前一样，只有空状态被传入。

没有 Redux

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