Javascript 反应-如何在另一个组件中显示图像onClick事件中的组件？

我有3个组件：

-主页-在显示图像时需要在此处显示组件 从标题组件中单击

-标题-包含将被单击以删除的图像标记 显示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>
                );
            }

导出类头扩展React.Component{
私有只读searchServerUrl=“”；
私有appButtonElement:HTMLElement；
构造器（道具：任何）{
超级（道具）；
this.state={showAppMenu:false}；
}
render（）{
const{showAppMenu}=this.state；
const{className，navItems，singleColumn，appItems}=this.props；
返回(
this.toggleAppMenu（）}ref={（menuButton:any）=>this.appButtonElement=menuButton}>
***单击图像时，在下面的HomeComponent中显示组件。***
{showAppMenu？this.onDismiss（）}/>：null}
this.executeSearch（searchTerm）}/>
);
}

主页

        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">

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

导出类HomeComponent扩展React.Component{
构造器（道具：任何）{
超级（道具）；
this.state={navItems:[]，appItems:[]，singleColumnLayout:false，showAllSites:false}；
}
componentDidMount（）{
这是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；
返回(

单击图像标记时，我需要在此处呈现

组件

        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">

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

);
}

最简单的方法是，您的

主页

和

标题

需要一个公共父组件，该组件将为它们保存一些共享状态，并通过回调将此状态更新为

标题

的道具。在共享状态下，您需要一个负责显示/隐藏

所有站点的标志组件，此标志将作为道具传递到
Home

您可以看到一个基本示例

如果您需要更高级的状态管理解决方案，您可以查看
谢谢。我最终将标题和所有网站内容组合在一起，但我也可以看到添加父项（如您的示例中所示）的方法也会起到作用。