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

Question

我有 3 个 React 组件:

-Home - 图片显示时需要在此处显示组件 从 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>
                );
            }

Answer 1

在最简单的方法中，您需要为您的 Home 和 Header 设置一个公共(public)父组件，该组件将为它们保存一些共享状态，并传递一个回调来更新它state 作为 Header 的 Prop 。在共享状态下，您需要一个标志来负责显示/隐藏 AllSites 组件，您将把这个标志作为 Prop 传递给 Home。

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

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