Question

我有主要和常见的顶部导航栏（TopMenu）和一个对应不同模块的主体。

/* App.js */

    render() {
        if (this.props.appLoading) return <Container />;
        return (
          <Container className="App" fluid>
            <TopMenu menuStyle={menuStyle} />
            <BodyContainer />
          </Container>
        );
      }

每个模块都有一堆菜单项，需要在该模块加载时显示在公共顶部导航上。

 /* TopMenu.js */

    render() {
        return (
          <Menu
            fixed="top"
            inverted
            secondary
            stackable
            style={this.props.menuStyle}
          >
            <Menu.Item as={Link} to="/" header>
              <Logo />
            </Menu.Item>

            { /* Module 1 Menu Items */ }

            {this.props.isAuthenticated && this.props.module==='market' && (
              <Menu.Menu position="left">
                <Menu.Item style={{ width: '30rem' }}>
                  <AutoCompleteContainer />
                </Menu.Item>
                <Menu.Item>
                  <Icon name="empty star" />
                </Menu.Item>
                <Menu.Item>
                  <Icon name="line chart" />
                </Menu.Item>
                <Menu.Item>
                  <Icon name="remove bookmark" />
                </Menu.Item>
                <Menu.Item>
                  <Icon name="lock" />
                </Menu.Item>
              </Menu.Menu>
            )}

            { /* Module 2 Menu Items */ }
            { /* Module x Menu Items */ }

            <Menu.Menu position="right">
              {!this.props.isAuthenticated && notAuthenticatedMenuItems}
              {this.props.isAuthenticated && (
                <Menu.Item>
                  <ProfileDropdown onSignOut={this.props.onLogOut} />
                </Menu.Item>
              )}
            </Menu.Menu>
          </Menu>
        );
      }
    }

显然，拥有一个共同的顶部导航使得很难在一个地方拥有与每个模块相关的所有显示/隐藏菜单项。这是因为在一个文件中会有很多代码，并且导航将保存显示/显示与每个模块相关的项目的逻辑，这是最佳实践。

我的问题是，我如何构建项目/代码，以便在模块加载时，每个模块加载所需的菜单项时重用常见的顶部导航？是否有一个＆＃34;扩展点＆＃34; React中的概念，其中公共顶部导航栏为模块插入其各自项目提供了扩展点。

Answer 1

您可以将顶级通用菜单作为一个组件，然后将您各自的单独菜单项作为子项传递给此导航组件

class TopMenu extends React.Component {
    render() {
        return (
          <Menu
            fixed="top"
            inverted
            secondary
            stackable
            style={this.props.menuStyle}
          >
            <Menu.Item as={Link} to="/" header>
              <Logo />
            </Menu.Item>

            {this.props.children}

            <Menu.Menu position="right">
              {!this.props.isAuthenticated && notAuthenticatedMenuItems}
              {this.props.isAuthenticated && (
                <Menu.Item>
                  <ProfileDropdown onSignOut={this.props.onLogOut} />
                </Menu.Item>
              )}
            </Menu.Menu>
          </Menu>
        );
      }
    }
 }

并将其用作

 <Container className="App" fluid>
        <TopMenu menuStyle={menuStyle}>
          { /* Module 1 Menu Items */ }

        {this.props.isAuthenticated && this.props.module==='market' && (
          <Menu.Menu position="left">
            <Menu.Item style={{ width: '30rem' }}>
              <AutoCompleteContainer />
            </Menu.Item>
            <Menu.Item>
              <Icon name="empty star" />
            </Menu.Item>
            <Menu.Item>
              <Icon name="line chart" />
            </Menu.Item>
            <Menu.Item>
              <Icon name="remove bookmark" />
            </Menu.Item>
            <Menu.Item>
              <Icon name="lock" />
            </Menu.Item>
          </Menu
        </TopMenu>
        <BodyContainer />
 </Container>

同样，您也可以在其他地方使用它

在React

1 个答案: