Question

当前正在工作一个小组项目，我一直在研究小组编写的代码，我很好奇是否有更好的方式将prop传递给n个子组件，这些子组件会更改顶级App组件的状态。

当前我们有这样的东西：

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更改状态。感觉错误，是否存在解决方案或更好的方法来将所有这些道具传递下去？

Answer 1

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

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

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

在您的Navbar组件中，您可以从showSplash获得状态下的props.showSplash值

如果要将数据传递到Navbar的子组件中，可以执行以下操作：

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

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

参考：

Spread in object literals

这里有一个示例stackblitz供说明。

Answer 2

如果您希望所有子组件都可以访问数据，则可以使用以下选项：

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

或者如果您现在正在寻找问题，也可以按照@Abdelkarim EL AMEL的答案进行操作。我建议您看一下上述选项，以及设置可在应用程序中任何位置访问的全局状态是否可以帮助您向每个组件明确发送道具。我宁愿对变量使用全局状态，这些变量是通用的，并且需要root应用程序的所有子级都可以访问。

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

Answer 3

我认为这实际上是完全可以的，建议您将其保留。

如果您不希望在render方法的返回中看到它的详细信息，则可以将它们全部保留在一个名为navbarprops的对象中，然后将其散布在其中。我仍然更喜欢它！

是否有更好的方法将多个道具传递给n个孩子

3 个答案: