Question

我有一个Parent React Native组件，它由三个子组件Header，Body和Footer组成。这是它在文件MyScreen.js中的排列方式：

<Container>    // I am using NativeBase Container

  <Header />
  <Body />
  <Footer />

</Container>

这三个子组件的定义包含在单独的文件中，例如Body.component.js，依此类推。

我想访问包含在不同文件Foo中的数组数据结构FooArray.js，并且它由Body和Footer组件导入。 Foo在Body组件内操作（这里我是该数组的push()对象），其长度Foo.length显示在Footer组件中。

如何确保每当将新对象推入Foo组件中的Body时，其新长度立即反映在单独的Footer组件中？ / strong>

赞赏任何想法，不仅涉及预期的解决方案，而且在需要时还可以对项目文件进行最佳重组。

Answer 1

反应通过状态解决了这个问题。

您将数据（foo）导入顶级组件（容器）并将其分配给状态。然后，您可以将状态作为道具传递给子组件。

所有子组件都可以使用这些道具，如果道具发生更改，它们会自动更新。

如果要从子组件中更改状态，则应将处理函数（在父组件中定义）传递给子组件作为道具。