Javascript 我应该将数据和方法放在嵌套组件中的何处？

我试图理解如何在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

包含更新与子组件相关的图表和数据的所有方法，并作为道具传入，例如：

HandleControl更改（事件）{

this.setState（selectedOption:event.target.value）
},
渲染（）{
返回(
)
}

或者该功能应该存在于

控件

组件中吗？第二种方法对我来说似乎更合理，但由于

控件

和

图表

是兄弟姐妹，我不确定当控件内发生变化时，如何将数据传递到

图表

。据我所知，数据只从父母流向孩子看起来ParentApp很快就会包含其子组件所需的所有方法，这似乎不利于保持组件模块化

---

我应该在何处存储数据和与之交互的方法？原则上，只有当必须在同级和/或父级之间共享此状态时，才会提升状态，当子组件不需要将其状态发送给父级或同级时，它可以有自己的状态，并且不需要提升

---

但实际上，大多数应用程序在父组件中将状态放在中心位置，甚至还有像Redux这样的中心状态库，也就是说，我们并没有以任何方式失去模块化，因为状态只是故事的一部分，例如，将应用程序拆分为组件将使您在呈现时具有模块化，还因为子com组件使用道具您可以使用不同的道具在多个位置重用同一组件，以控制其外观，几乎与您通过应用类更改

链接外观的方式相同。

每个子组件、父组件或子组件的处理程序方法在哪里？如果是子组件，我将如何更新父组件的状态？这是可能的，还是一个好主意？@1252748通常您会将方法从父级传递到子级。子组件函数对父级状态没有任何访问权限。正如答案所述，Redux之类的模式会改变动态，因为您可以从更新任意状态的子级分派（Redux）操作，这通常是映射到连接的任何组件中的属性。

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