有没有更好的方法将多个道具传递给 n 个孩子答案

【问题标题】：Is there a better way to pass multiple props down to n children有没有更好的方法将多个道具传递给 n 个孩子
【发布时间】：2019-04-07 22:54:20
【问题描述】：

目前正在进行一个小组项目，我一直在查看小组编写的代码，我很好奇是否有更好的方法将道具传递给改变顶级 App 组件状态的 n 个子组件。

目前我们有这样的东西：

return (
  <div>
    <header className="navBar">
      // NavBar is an example for the question
      <NavBar
        showSplash={this.state.showSplash}
        displayAllSearchResults={this.displayAllSearchResults}
        searchBarDisplay={this.state.showCard}
        updateResults={this.updateResults}
        selectResult={this.selectResult}
        searchResults={this.state.searchResults}
        showSuggestions={this.state.showSuggestions}
      />
    </header>
    <section className="App">
      <article className="mainContent">{card}</article>
    </section>
    <div className="appBackground" />
  </div>
);

所有这些方法（可能太多）都被传递到 NavBar 组件中，该组件本身由 SearchBar 组件组成，该组件还需要传递给它的巨大块以更改所有状态回到顶级App的路。这感觉错了，有没有解决方案或更好的方法来传递所有这些道具？

【问题讨论】：

在我的项目中，我会传递道具，正如 Abdelkarim 在他的回答中解释的那样，如果它只是一个孩子的孩子。如果它恰好是深度 >= 3 个孩子，那么我要么重构，要么使用 React 上下文来访问层次树中的道具。

标签： javascript reactjs

【解决方案1】：

您可以像这样使用spread 运算符：

<NavBar  {...this.state} />

它会将你的状态属性作为道具传递给导航栏。

在你的 Navbar 组件中，你可以从props.showSplash 获取状态中showSplash 的值

如果你想将数据传递给导航栏的子组件，你可以这样做：

<ChildComponent {...props} /> // if Navbar is a functional component

<ChildComponent {...this.props} /> // if Navbar is a stateful component

参考：

Spread in object literals

这是一个示例stackblitz 用于说明。

【讨论】：

你可以，但我不会。像这样传播 props 会很快变得混乱，因为当容器需要更多与 NavBar 无关的 props 时，您必须将它们分开，从而更难考虑 NavBar 到底接收了什么。您也有可能忘记过滤掉不需要的道具，最终让一些孩子收到他们不关心的道具。如果容器的其他部分不关心这些状态值，我会“向下移动状态” - 将它包装在一个组件中，将它与子组件一起封装。这样可以避免整个 App 重新渲染。

【解决方案2】：

如果您希望所有子组件都可以访问数据，那么您有以下选择：

React Context
Redux 或状态管理库，如 flux 等。

或者你可以按照@Abdelkarim EL AMEL 的回答来寻找你现在的问题。我建议看看上面提到的选项，如果设置一个可以在应用程序的任何地方访问的全局状态可以帮助你不显式地向每个组件发送 prop。我更愿意为变量使用全局状态，这些变量是常见的并且需要由根应用程序的所有子级访问。

例如用于更改应用主题的按钮组件。它改变了根应用程序的状态，每个组件都可以访问。

【讨论】：

有一个新的状态管理库，它非常容易理解，尤其适合初学者。它被称为 MST（Mobx-State-Tree）。如果他决定使用状态管理器，这可能是他最好的选择之一。我认为 Redux 和 Flux 设置起来有点过于复杂，尤其是对于初学者而言。

【解决方案3】：

我认为这实际上完全可以，建议离开它。

如果您不喜欢在 render 方法的返回中逐项查看它，您可以将它们全部保存在一个名为 navbarprops 的对象中，然后将其传播。我仍然更喜欢它！

【讨论】：