Question

我有一个需要从其他各种组件进行更新的组件。该组件是我网页的标题，我希望根据用户的操作/导航位置来更新标题中的文本。

现在我有：

HeaderTitle.js

  class HeaderTitle extends Component {

  constructor() {
    super();
    this.state = {
      headerTitle : "Suite"
    };
  }

  setHeaderTitle(text) {
      this.setState({
        headerTitle : text
      })
  }

  render() {
    return (
      <h1>{this.state.headerTitle}</h1>
    )
  }

}

App.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="main-content">

          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <HeaderTitle/>
          </header>

          <Content/>
        </div>

        <MainMenu/>
      </div>
    );
  }
}

可以说，我想从以下位置更新HeaderTitle的众多视图之一：

class InventoryContainer extends Component {

  componentDidMount() {

    HeaderTitle.setHeaderTitle("Search Inventory")

  }

  render() {
    return (
    )
  }

}

export default InventoryContainer

Answer 1

经验法则是，当多个组件与该数据交互时，内部组件状态应提升为应用程序/全局状态。

如果您正在使用Redux或其他应用程序状态管理器，则headerTitle应该处于Redux状态，并且您将调度redux操作以更改其值。

如果您没有使用Redux或类似的东西，那么“ headerTitle”应该位于与之交互的应用程序的最顶层（即消耗或更改数据）。

我建议将this.state = { headerTitle: '' }和您的setHeaderTitle方法移到App.js中。然后，您可以通过道具将this.setHeaderTitle和this.state.headerTitle传递给其他组件。

从众多组件中的一个组件调用函数以更新状态

1 个答案: