Передача данных в независимый компонент React

reactjs react-router react-jsx

325 просмотра

1 ответ

У меня есть этот HomeContainerкомпонент, Homeкомпонент и этот Headerкомпонент.

  1. HomeContainerсодержит state of cityи<Home city={this.props.city} />

  2. Homeсодержит функцию без сохранения состояния и содержит JSX. так через this.propsя могу получить доступHomeContainer's city

Проблема - я хочу отправить данные, чтобы Headerя мог обновить город в заголовке всякий раз, когда кто-то вводит что-то в поле ввода

Я думаю, что Mainкомпонент имеет доступ к дочерним компонентам, но Mainкомпонент вызывается через маршруты, поэтому я не могу понять это.

Спасибо

введите описание изображения здесь

Автор: arora Источник Размещён: 08.11.2019 11:03

Ответы (1)


1 плюс

Решение

У вас есть структура jsx, похожая на:

<Main>
  <Header />
  <HomeContainer />
</Main>

Поскольку cityсвойство должно использоваться обоими <Header />и <HomeContainer />, то его не следует определять в<HomeContainer />

cityвместо этого следует определить как состояние в <Main />и передается на оба <Header />и<HomeContainer />

Это подразумевает, что вы также определяете обратный вызов для changeCity()in <Main />и передаете его <HomeContainer />как опору.

Таким образом, оба <Header />и </HomeContainer>будут обновляться с изменениями cityатрибута

Автор: Cent Размещён: 20.08.2016 08:53
Вопросы из категории :
32x32