React - 如何在另一个组件中显示来自图像 onClick 事件的组件？答案

【问题标题】：React - How to show component from an image onClick event in another component?React - 如何在另一个组件中显示来自图像 onClick 事件的组件？
【发布时间】：2017-12-12 22:40:11
【问题描述】：

我有 3 个 React 组件：

-首页 - 需要在此处显示图片时的组件从 Header 组件中点击

-Header- 包含将被点击到的图片标签显示 AllSites 组件。

-AllSites - Image 时需要在 Home 组件中显示的组件单击 Header 组件。

标题

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

在最简单的方法中，您需要为您的Home 和Header 提供一个共同的父组件，该组件将为它们保存一些共享状态，并将传递一个回调以将此状态更新为Header 的prop。在共享状态下，您需要一个标志来负责显示/隐藏AllSites 组件，您将将此标志作为道具传递给Home。

你可以看一个基本的例子here

如果需要更高级的状态管理解决方案，可以查看redux library

【讨论】：

谢谢。我最终将标题和所有网站内容组合在一起，但我也可以看到在您的示例中添加父级也是如何工作的。