コンポーネントの外側をクリックすると反応が検出されます

Question

こんにちは私は反応が新しく、<Navigation>でクリックした内容に応じて<API-Result/>に内容をロードしようとしています。私はと通信し、正しいコンテンツを表示する<Navigation>のイベントをどのように発射することができるのかよくわかりません。どのようにクリックしたのですか<Api-Result/>に通知するにはどうすればよいですか？

の間には関係がありません：

• 子供に親
• 子マイ構造

親には私の<App>には、一般的な解決策を作ることです

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

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

Answer 1

ですデータとアクションをそのcに委譲するツリーのどこかの親ヒルドレン。 Reactはそれ自体を「ツリー」としてモデル化しているため、ある時点でこれらのコンポーネントが親を共有することを意味します。ちょうどそれが<AppContainer>と呼ばれるとしましょう。

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

あなたはその後、それ以下のコンポーネントに委譲したデータを<AppContainer>に機能を揚げます。メニューをクリックすると、「保存された」項目が表示されたとします。あなたはこのような振る舞いをモデル化する可​​能性があります。これは、あなたが<ApiResult>と<Navigation>の両方でその変数にアクセスできるようになります

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

。その変数が状態で変更されると、両方に再レンダリングがトリガーされ、最新であることが保証されます。