Question

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

Header组件具有一个名为HeaderImage（url）的属性，我希望能够从Page组件中更新HeaderImage（url）。

任何人都可以提出一个好的方法，我正在考虑向Header组件添加一些逻辑，该逻辑基于Route来切换HeaderImage（url），但是我想要更多的灵活性。理想情况下，我希望能够从Page组件子项中更新图像。

Answer 1

您可以将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>
    );
  }
}

Answer 2

也许您需要在组件中实现componentWillUpdate，请参阅有关此文档。

React js ComponentWillUpdate

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

2 个答案: