Обновить свойство в компоненте из родительско-дочернего компонента

Question

В корне моего приложения у меня есть компонент заголовка, который содержит изображение.Корень также содержит компонент Page, который содержит различное содержимое в зависимости от маршрута.

Компонент Header имеет свойство с именем HeaderImage (url), и я хотел бы иметь возможность обновлять HeaderImage (url) из компонента Page.

Может кто-нибудь предложить хороший подход, я думал просто добавить некоторую логику в компонент Header, который переключал HeaderImage (url) на основе маршрута, но мне хотелось бы немного большей гибкости.В идеале я хотел бы иметь возможность обновить изображение из дочерних компонентов компонента Page.

Answer 1

Может быть, вам нужно реализовать componentWillUpdate в вашем компоненте, см. Этот документ об этом.

Реакция js ComponentWillUpdate

Answer 2

Вы можете передать URL-адрес root и позволить root обновлять его для Header с помощью реквизитов, таких как:

class Root extends React.Component {
  render() {

    constructor(props){
      super(props);

      this.state={
        urlForHeader : null
      }

      this.updateUrl = this.updateUrl.bind(this);
    }

    function updateUrl(url){
      this.setState({
        urlForHeader : url
      })
    }

    return (
      <div>
        <Header
          url={this.state.urlForHeader}
        />
        <PageContent
          updatingFunction={this.updateUrl}
        />
      </div>
    );
  }
}