React - 他のコンポーネントのimage onClickイベントからコンポーネントを表示するにはどうすればいいですか？私は3コンポーネントリアクトてい

Question

：

-Home - 画像は は、ヘッダーコンポーネントからクリックされたときに

-Header-が にクリックされるイメージタグが含まれていますここにコンポーネントを表示する必要がAllSitesを表示します成分。

-AllSites - ヘッダーコンポーネントで画像が にクリックされたときにホームコンポーネントに表示される必要があるコンポーネント。

ヘッダー

 export class Header extends React.Component<any, any> { 
      private readonly searchServerUrl = ""; 
      private appButtonElement: HTMLElement; 

      constructor(props: any) { 
       super(props); 

       this.state = { showAppMenu: false }; 
      } 

      render() { 
       const { showAppMenu } = this.state; 
       const { className, navItems, singleColumn, appItems } = this.props; 

       return (
        <header className={className}> 
         <div className="app-icon"> 
          <button className="nav-button" onClick={() => this.toggleAppMenu()} ref={(menuButton: any) => this.appButtonElement = menuButton}><i className="ms-Icon ms-Icon--Waffle" aria-hidden="true"></i></button> 
         </div> 

    ***When image is clicked, show the <AllSites/> component in the HomeComponent below.*** 
         <img src="/Styles/Images/logo/loop-logo-white.png" className="nav-logo" onClick={} /> 


{showAppMenu ? <ApplicationMenu navItems={appItems} targetElement={this.appButtonElement} onDismiss={() => this.onDismiss()} /> : null} 
        <div className="nav-container"><TopNavigation classNam 

e={className} navItems={navItems} singleColumn={singleColumn} /></div> 
         <div className="search-container"> 
          <SearchBox onSearch={(searchTerm: string) => this.executeSearch(searchTerm)} /> 
         </div> 
        </header> 
       ); 
      } 

ホーム

 export class HomeComponent extends React.Component<any, any> { 
      constructor(props: any) { 
       super(props); 
       this.state = { navItems: [], appItems: [], singleColumnLayout: false, showAllSites: false }; 
      } 

      componentDidMount() { 
       this.checkWidth(); 
       window.addEventListener("resize", this.checkWidth.bind(this)); 

       this.fetchNavigation() 
        .then(nav => this.setState({ navItems: nav })); 

       this.fetchAppIcons() 
        .then(icons => this.setState({ appItems: icons })); 
      } 


      componentWillUnmount(): void { 
       window.addEventListener("resize", this.checkWidth.bind(this)); 
      } 

      render() { 
       const { navItems, appItems, singleColumnLayout } = this.state; 

       return (
        <Fabric> 
         <Header navItems={navItems} appItems={appItems} singleColumn={singleColumnLayout} /> 
         <div className="main-container"> 
          <AlertBar /> 
          <div className="main-content"> 


           <div className="ms-Grid"> 

画像タグをクリックすると、私は<AllSites/>コンポーネントをレンダリングする必要があり、ここで

        <Hero singleColumn={singleColumnLayout} /> 
            <div className="ms-Grid-row"> 
             <div className="ms-Grid-col ms-sm12 ms-xl4 webpart-container"> 
              <UpcomingEvents /> 
             </div> 
             <div className="ms-Grid-col ms-sm12 ms-xl4 webpart-container"> 
              <EmployeeNews /> 
             </div> 
             <div className="ms-Grid-col ms-sm12 ms-xl4 webpart-container"> 
              <div className="ms-Grid-row"> 
               <div className="ms-Grid-col ms-sm12 webpart-container"> 
                <IndustryNews /> 
               </div> 
               <div className="ms-Grid-col ms-sm12 webpart-container"> 
                <Quote /> 
               </div> 

              </div> 
             </div> 
            </div> 
           </div> 

           <Footer navItems={navItems} /> 
          </div> 
         </div> 
        </Fabric> 
       ); 
      } 

Answer 1

最も簡単なアプローチでは、HomeとHeaderに共通の親コンポーネントが必要です。これらのコンポーネントは共有状態を保持し、この状態を小道具としてHeaderに更新するコールバックを渡します。共有状態では、の小道具として渡されるこのフラグは、AllSitesコンポーネントを表示/非表示にするフラグを必要とします。

あなたは、より高度な状態管理ソリューションが必要な場合は、redux library