时间戳

首页 > 解决方案 > 如何在多个 React Native 组件中保持变量的当前值

javascript - 如何在多个 React Native 组件中保持变量的当前值

问题描述

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

<Container>    // I am using NativeBase Container

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

</Container>

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

我想访问Foo包含在不同文件中的数组数据结构，FooArray.js它由两个组件导入。在组件内部进行操作（我在这里反对这个数组）并且它的长度显示在组件中。BodyFooterFooBodypush()Foo.lengthFooter

我如何确保每当一个新对象被推送到组件Foo中Body时，它的新长度会立即反映在单独的Footer组件中？

任何想法，不仅涉及预期的解决方案，而且如果需要，还涉及项目文件的最佳重组，我们将不胜感激。

标签： javascriptreactjsreact-native

解决方案

React 用状态解决了这个问题。

您将数据 (foo) 导入顶级组件 (Container) 并将其分配给状态。然后您可以将状态作为道具传递给子组件。

所有子组件都可以使用这些道具，并且会在道具更改时自动更新。

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

推荐阅读