Question

我有3个React组件：

-Home - 需要在图像显示时显示组件从标题组件中单击

-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，它们将为它们保留一些共享状态，并且将传递回调以将此状态更新为支持{ {1}}。在共享状态中，您需要一个标志来负责显示/隐藏Header组件，此标志您将作为道具传递给AllSites。

您可以看到基本示例here

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

React - 如何在另一个组件中的onClick事件中显示组件？

1 个答案: