Question

您好我是最新的反应，我正在尝试加载<API-Result/>中的内容，具体取决于<Navigation>中点击的内容。我不确定如何在与<Navigation>通信的<Api-Result/>中触发事件并显示正确的内容。如何通知<Api-Result/>点击了哪些内容？

之间没有关系：

父母与孩子
孩子到父母

我的<App>中的结构是

<Header>
 <Navigation />  //<----- here is menu
     ...
</Header>

<Content Grid>
    <Api-Result /> //<----- here is the content
</Content Grid>

Answer 1

一般的解决方案是在树的某个地方建立父级，将数据和操作委托给其子级。由于React将自身模型化为“树”，这意味着在某些时候这些组件将共享父级。我们只是说它叫<AppContainer>。

<AppContainer>   <-- this will delegate the data to the components below it
  <Header>
    <Navigation />
  </Header>
  <Content Grid>
    <ApiResult />
  </Content Grid>
</AppContainer>

然后将函数提升到<AppContainer>，它将数据委托给它下面的组件。假设单击菜单显示“已保存”项目。您可以对此行为进行建模：

class AppContainer extends Component {
  state = { showSaved: true };

  onMenuClick = () => {
    this.setState({ showSaved: true });  // example
  };

  render() {
    return (
      <div>
      <Header>
        <Navigation
          showSaved={this.state.showSaved}
          onMenuClick={this.onMenuClick}
        />
      </Header>
      <ContentGrid>
        <ApiResult menuClicked={this.state.showSaved} />
      </ContentGrid>
      </div>
    );
  }
}

这样您就可以在<ApiResult>和<Navigation>中访问该变量。当该变量在状态中更改时，它将触发对两者的重新渲染，确保它们是最新的。

React检测在组件外部单击的内容

1 个答案: