我有一个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组件中？
任何想法，不仅涉及预期的解决方案，而且如果需要的话，还包括项目文件的最佳重组，我们对此表示赞赏。
React用状态解决了这个问题。
您将数据（foo）导入顶级组件（Container）并将其分配给状态。然后，您可以将状态向下传递给子组件作为道具。
所有子组件都可以使用这些道具，并且如果道具发生变化则会自动更新。
如果要从子组件中更改状态，则应将处理函数（在父组件中定义）作为props传递给子组件。