javascript - 我应该将数据和方法放在嵌套组件中的哪里？

Question

我试图了解如何在 React 中执行以下流程

page load
  ajaxA()
    -return dataA
      -render dropdown HTML
      -ajaxB(dataA)
        -return dataB
          -render chart HTML


handleDropdownChange()
  -ajaxB()
    -return dataB
      -render chart HTML

我把它分成两个部分

• 带有控件的顶部部分(ajaxA 返回数据以构建一些下拉菜单。

• 下面是一些图表。当顶部的下拉菜单之一发生变化时，图表应该更新。

ParentApp 是否应该包含用于更新与子组件相关的图表和数据的所有方法，并将两者作为 props 传入，例如:

handleControlChange(事件){

  this.setState(selectedOption: event.target.value)
},
render () {
  return (
    <ParentApp>
      <Controls
        handleControlChange={this.handleControlChange} />
      <Chart />
    </ParentApp>
  )
}

或者该功能应该存在于 Controls 组件中吗？第二种方式对我来说似乎更合理，但由于 Controls 和 Chart 是 sibling ，我不确定如何将数据传递给 Chart是“控件”内的更改。据我了解，在 React 中数据仅从 parent 流向 child 。看起来 ParentApp 很快就会包含其子组件所需的基本上所有方法，这似乎违背了保持组件模块化。

我应该在哪里存储我的数据以及与之交互的方法？

Answer 1

原则上，React仅在必须在兄弟组件和/或父组件之间共享该状态时提升状态，当子组件不需要将其状态发送给父组件或兄弟组件时，它可以拥有自己的状态并且不提升是需要的。

但实际上，大多数应用程序都会在父组件的中心位置拥有状态，甚至还有像 Redux 这样的中心状态库，也就是说我们没有以任何方式失去模块化性，因为状态只是故事的一部分，对于将应用程序拆分为组件的示例将为您提供渲染的模块化性，同时因为子组件需要 Prop ，您可以在多个位置使用不同的 Prop 重用相同的组件来控制其外观，这几乎与更改 <a> 的外观相同。只需应用一个类即可链接。