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

IT技术 javascript reactjs

2021-05-20 18:10:53

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

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

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

如果我们需要将消息从父组件传递到子组件，我们可以使用 props 来实现。例如，在创建 Board 时，我们将行、列作为props传递。
```
<Board rows={5} cols={5} />
```
如果我们需要将消息从子组件传递到父组件，我们可以通过传递回调来实现。例如，我们将 play() 回调从 Board 传递到 Cell。在 Cell 中，我们将 onClick 处理程序设置为传递的回调，即 play()。
```
<Cell onClick={this.props.play(this.props.id)} />
```
我遇到的一个悬而未决的问题是如何在兄弟组件之间传递消息（例如仪表板到单元）。一个用例是在单击仪表板组件中的重置按钮时重置我的 Board 组件。这是仪表板中的重置按钮的样子。我的问题是，一旦重置消息到达 App 组件，将其传递给 Board 的最佳做法是什么？
```
<input type="button" value="reset" onClick={this.props.reset} />
```

获得有关 1 和 2 的一些反馈会很棒。另外，3 的最佳实践。

2个回答

终极版

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

用户单击位于仪表板组件内的重置按钮
与该点击相关的功能只做一件事。调度“RESET_BOARD”动作
在减速器中，RESET_BOARD 操作重置板的状态。
当重新渲染发生时，板子在props中传递，就像以前一样，只有空状态被传递到它。

没有 Redux

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

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

家长更新孩子：
孩子更新父母：
兄弟姐妹（Brothers）互相更新（兄弟）

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

主要思想是让祖父（`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

其它你可能感兴趣的问题

上一篇如何在同一页面上切换多个react组件下一篇React TS - 如何将 props 从父组件传递给深度嵌套的子组件