Отправка реквизита между компонентами (не связанными) React-Native

Question

У меня есть каталог Components, есть js файл Timer, где у меня есть компонент обратного отсчета

const [countdownTimer, setCountdownTimer] = useState(15);

Этот компонент возвращает только <Text>{countdownTimer}</Text> на экране. Еще у меня есть еще один компонент Описание. Я хочу обработать это состояние в моем компоненте описания, чтобы внести некоторые изменения после изменения времени. Компоненты не связаны (они не импортируются друг в друга)

Я попытался импортировать описание в таймер, чтобы отправить значение в виде реквизита, например

<Description setCountdownTimer={setCountdownTimer} />

, и со стилем скрыть его но display: none не работает на Android. Я также пытаюсь просто спрятаться другим методом

{false && <Description setCountdownTimer={setCountdownTimer} />}

, но он тоже не работает, у меня в консоли «undefined».

Answer 1

Привет, @Danny Если я правильно понял ваш вопрос, вы пытаетесь разделить состояние countDown между двумя разными компонентами, и способ, которым вы пытаетесь это сделать, может немного усложнить вас, если нет, я предлагаю вам использовать redux, который является библиотека, предназначенная для управления глобальными состояниями приложений, с помощью redux вы сможете делиться состояниями вашего приложения с несколькими компонентами. Вам нужно создать reducers, и благодаря методу createStore из ` redux вы сможете использовать глобальное состояние для всего вашего приложения. Вот пример кода, который вы можете улучшить в зависимости от вашего need:

import { createStore } from 'redux';
import reducer from './reducer';
import { Provider } from 'react-redux';
const store = createStore(reducer);

export default function App () {
  return (
    <Provider store = {store}>
      <YourMainComponent />
    </Provider>
  )
}

Вам просто нужно обернуть ваш основной компонент компонентом Provider из response-redux, чтобы получить доступ к вашему глобальному состоянию и управлять им по своему усмотрению. Подробнее здесь https://react-redux.js.org/introduction/basic-tutorial

Answer 2

В вашем случае вам следует взглянуть на React Context: https://reactjs.org/docs/context.html