从父子组件更新组件中的属性

Question

在我的应用程序的根目录中，我有一个包含图像的Header组件。根目录还包含一个Page组件，该组件根据Route保存不同的内容。

Header组件有一个名为HeaderImage (url)的属性，我希望能够从页面组件更新HeaderImage (url)。

有没有人建议一个好的方法，我只是想在头部组件中添加一些逻辑，根据路由来切换HeaderImage (url)，但我想要更多的灵活性。理想情况下，我希望能够从Page组件的子组件中更新图像。

Answer 1

您可以将url传递给root，然后让root使用如下所示的属性更新它的头部：

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>
    );
  }
}

Answer 2

也许你需要的是在你的组件中实现componentWillUpdate，请参阅这个文档。

React js ComponentWillUpdate