在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，那么所有这些组件都有一个共同点;他们都是从应用程序状态读取它们的值。我将使用的流程如下：

1. 用户点击控制台组件内的重置按钮

2. 与该点击相关联的功能只做一件事。发送＆＃34; RESET_BOARD＆＃34;动作

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

4. 当重新渲染发生时，棋盘会像以前一样传递道具，只会传递空状态。

没有Redux

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

Answer 2

但也是限制;两种组件之间的通信受限于3种情况：

1. 家长更新孩子：

2. 子更新父级：

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

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

主要思想是将祖父（App）作为代理来转移通信。

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

Dashboard.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