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

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&nbsp; {...this.state} />它将状态属性作为道具传递给导航栏。在您的Navbar组件中，您可以从中获取showSplashstate的值props.showSplash如果要将数据传递到Navbar的子组件中，则可以执行以下操作：<ChildComponent {...props} /> // if Navbar is a functional component<ChildComponent {...this.props} /> // if Navbar is a stateful component

Answer 2

如果希望所有子组件都可以访问数据，则可以选择以下选项：反应上下文Redux或状态管理库，例如flux等或者如果您现在正在寻找问题，则可以按照@Abdelkarim EL AMEL的答案进行操作。我建议您看一下上述选项，以及设置可以在应用程序中任何位置访问的全局状态是否可以帮助您不向每个组件都明确。我更愿意为变量使用全局状态，这些变量是通用的，需要由根应用程序的所有子级访问。例如，用于更改应用程序主题的按钮组件。它更改了根应用程序的状态，并且每个组件都可以访问它。

Answer 3

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