Как поддерживать текущее значение переменной в нескольких компонентах React Native
У меня есть компонент 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?
Приветствуются любые идеи, касающиеся не только ожидаемого решения, но и оптимальной реструктуризации файлов проекта, если это необходимо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
React решает эту проблему с помощью состояния.
Вы импортируете свои данные (foo) в компонент верхнего уровня (контейнер) и назначаете его состоянию. Затем вы можете передать состояние дочерним компонентам в качестве свойств.
Все дочерние компоненты могут использовать эти свойства и будут автоматически обновляться при изменении свойства.
Если вы хотите внести изменения в состояние из дочерних компонентов, вы должны передать функции-обработчики (определенные в родительском компоненте) дочерним компонентам в качестве свойств.