我应该在嵌套组件中放置数据和方法？

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是否应包含更新与子组件相关的图表和数据的所有方法，并将其作为道具传递，例如：

handleControlChange（event）{

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

或该功能是否应该存在于Controls组件中？第二种方式对我来说似乎更合理，但由于Controls和Chart是兄弟姐妹，我不确定当``控制内有变化时我如何将数据传递给Chart。据我所知，React中的数据仅从父母流向儿童。似乎ParentApp很快就会包含其子组件所需的所有方法，这似乎与保持组件模块化有关。

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

Answer 1

原则上React只在兄弟姐妹和/或父母之间必须共享这个状态时才提升状态，当子组件不需要将其状态发送给父母或兄弟姐妹时，它可以有自己的状态而不是需要提升。

但实际上大多数应用程序都会在父组件的中心位置，甚至有像Redux这样的中央州的库，据说我们没有以任何方式失去模块性，因为状态只是故事的一部分例如，将应用程序拆分为组件将为您提供渲染的模块化，也因为子组件采用道具，您可以在多个地方使用不同的道具重用相同的组件来控制其外观，几乎与更改{{1的外观相同通过应用一个类链接。