Javascript Reactjs-重构菜单标题代码

我已经构建了一个reatjs组件头——带有antd——mobile/desktop。。我试图减少重复的代码——在一个函数中生成菜单结构

如果用户导航到了菜单上没有的页面，我也会在尝试取消激活所有活动链接方面遇到问题。。就像它们与页脚/术语交互一样——它不会出现在/主页上，因此我希望确保取消选中页眉菜单中的“主页”

使用buildMenu功能呈现桌面和移动版本的菜单

如果用户导航到不在菜单上的页面，则解决取消选择/活动问题-我尝试检查位置路径-但它变得混乱

这是代码库

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Menu, Icon, Alert } from 'antd'

// assets
import LogoImage from '../../img/logo.png'

// css
import './header.scss'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

// this is a class because it needs state
class Header extends Component {

  constructor (props) {
    super(props)
    //console.log(this.props.current)
    this.state = {
      isHamburgerOpen: false,
      current: this.props.current,
    }
    this.toggleHamburgerIcon = this.toggleHamburgerIcon.bind(this)
  }

  toggleHamburgerIcon () {
    this.setState(prevState => ({
      isHamburgerOpen: !prevState.isHamburgerOpen
    }))
  }

  handleClick = (e) => {
    //console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }

  componentDidMount() {    
    //console.log('did mount')
    // window.location.pathname.substr(1)
  }

  buildMenu (menu) {

      //build the menu and return it here

  }

  render () {
    //console.log('this.state', this.state)
    //console.log('this.props.current', this.props.current)

    var menu = [
          {
            "title" : "Home",
            "link"  : "/home"
          },
          {
            "title" : "Actions",
            "link"  : "/actions"
          },
          {
            "title" : "Past SDQS",
            "link"  : "/past-sdq"
          },
          {
            "title" : "Account",
            "link"  : "/account"
          }/*,
          {
            "title"    : "Sub page test",
            "link"     : "/sub",
            "children" : [
              {
                "title" : "child sub",
                "link"  : "/child"
              }
            ]
          }*/
        ];

        console.log("menu", menu);

    return (
      <div>

        <nav className={`HeaderLandingNavOffcanvas ${this.state.isHamburgerOpen ? 'show' : ''}`}>
          <h1 className='display-none nocontent'>Site navigation</h1>
          <i className='anticon anticon-close closeOffsiteMenu' onClick={this.toggleHamburgerIcon}/>
          <div className='row grid__row--offset--30'>
            <div className='small-58 small-centered columns'>
              <Menu
                   mode='inline'
                   onClick={this.handleClick}
                   selectedKeys={[this.state.current]}
                >                  

                  {
                    menu.map(item => {
                      if (item.hasOwnProperty('children') && item.children.length > 0) {
                        //if the header menu comes with children make use of the submenu component

                        return (
                          <SubMenu className='menu-gtm' key={item.title} title={<span>{item.title}<Icon type='down' /></span>}>
                            {item.children.map(function (child) {
                              //If the lang file list additional children of the child, produce a grouped menu component                               
                              if (child.hasOwnProperty('children')) {
                                return (
                                  <MenuItemGroup style={{textTransform: 'uppercase'}} key={item.title + ':' + child.title} title={child.title}>
                                    {child.children.map(function (grandChild, index) {
                                      return (
                                        <Menu.Item className='menu-gtm-bundle' key={grandChild.title + index}>
                                          <Link onClick={this.specifyBundleIsNull} to={grandChild.link}>{grandChild.title}
                                          </Link>
                                        </Menu.Item>
                                      )
                                    }, this)}
                                  </MenuItemGroup>
                                )
                              } else {
                                //use a submenu item without group style
                                return (
                                  <Menu.Item className='menu-gtm-service' key={item.title + ':' + child.title}>
                                    <Link to={child.link}>
                                      {child.title}
                                    </Link>
                                  </Menu.Item>
                                )
                              }
                            }, this)}
                          </SubMenu>
                        )
                      } else {
                        //If the menu has not child elements - simple nav elements without dropdown menu
                        return (
                          <Menu.Item className='menu-gtm' key={item.title}>
                            <Link to={item.link}>{item.title}</Link>
                          </Menu.Item>
                        )
                      }
                    }, this)
                  }

                </Menu>
            </div>
          </div>
        </nav>

        {/* Large Header */}
        <header className='ant-design-header transition show-for-large-up transparent'>
          <Row align='middle' type='flex' className='header-row-offset' style={{height: '100%'}}>
            <Col span={24}>
              <Row align='middle' type='flex' className='header-row-offset' style={{maxWidth: '1250px', marginLeft: 'auto', marginRight: 'auto'}}>
                <Col xs={10} sm={6} md={6}>
                  <Link to='/'>
                    <img className='-logo transition' src={LogoImage} alt='logo' />
                  </Link>                  
                </Col>
                <Col xs={0} sm={0} md={18}>
                  <Menu
                    className='show-for-large-up'
                    mode='horizontal'
                    onClick={this.handleClick}
                    selectedKeys={[this.state.current]}
                    style={{ float: 'right', marginTop: '5px' }}
                  >

                  {
                    menu.map(item => {
                      if (item.hasOwnProperty('children') && item.children.length > 0) {
                        //if the header menu comes with children make use of the submenu component

                        return (
                          <SubMenu className='menu-gtm' key={item.title} title={<span>{item.title}<Icon type='down' /></span>}>
                            {item.children.map(function (child) {
                              //If the lang file list additional children of the child, produce a grouped menu component                               
                              if (child.hasOwnProperty('children')) {
                                return (
                                  <MenuItemGroup style={{textTransform: 'uppercase'}} key={item.title + ':' + child.title} title={child.title}>
                                    {child.children.map(function (grandChild, index) {
                                      return (
                                        <Menu.Item className='menu-gtm-bundle' key={grandChild.title + index}>
                                          <Link onClick={this.specifyBundleIsNull} to={grandChild.link}>{grandChild.title}
                                          </Link>
                                        </Menu.Item>
                                      )
                                    }, this)}
                                  </MenuItemGroup>
                                )
                              } else {
                                //use a submenu item without group style
                                return (
                                  <Menu.Item className='menu-gtm-service' key={item.title + ':' + child.title}>
                                    <Link to={child.link}>
                                      {child.title}
                                    </Link>
                                  </Menu.Item>
                                )
                              }
                            }, this)}
                          </SubMenu>
                        )
                      } else {
                        //If the menu has not child elements - simple nav elements without dropdown menu
                        return (
                          <Menu.Item className='menu-gtm' key={item.title}>
                            <Link to={item.link}>{item.title}</Link>
                          </Menu.Item>
                        )
                      }
                    }, this)
                  }

                  </Menu>
                </Col>

                <Col xs={{ span: 4, offset: 10 }} sm={{ span: 4, offset: 14 }} md={0}>
                  <div style={{ float: 'right', height: '50px', marginRight: '10px' }}>
                    <div className={`hamburger--elastic hamburger hamburger_nav_button right-off-canvas-toggle ${this.state.isHamburgerOpen ? 'is-active' : ''}`} onClick={this.toggleHamburgerIcon} style={{ marginTop: '5px' }}>
                      <span className='hamburger-box'>
                        <span className='hamburger-inner' />
                      </span>
                    </div>
                  </div>
                </Col>
              </Row>

            </Col>
          </Row>
        </header>


      </div>
    )
  }

}

export default Header

import React，{Component}来自“React”
从“react router dom”导入{Link}
从“antd”导入{行、列、菜单、图标、警报}
//资产
从“../../img/logo.png”导入LogoImage
//css
导入“./header.scss”
常量子菜单=Menu.SubMenu；
const MenuItemGroup=Menu.ItemGroup；
//这是一个类，因为它需要状态
类头扩展组件{
建造师（道具）{
超级（道具）
//console.log（this.props.current）
此.state={
伊莎伯格：错，
当前：this.props.current，
}
this.toggleHamburgerIcon=this.toggleHamburgerIcon.bind（this）
}
切换开关（）{
this.setState（prevState=>({
isHamburgerOpen:！prevState.isHamburgerOpen
}))
}
handleClick=（e）=>{
//console.log（'click'，e）；
这是我的国家({
现任：e.key，
});
}
componentDidMount（）{
//console.log（'did mount'）
//window.location.pathname.substr（1）
}
构建菜单（菜单）{
//构建菜单并返回此处
}
渲染（）{
//console.log（'this.state'，this.state）
//console.log（'this.props.current'，this.props.current）
变量菜单=[
{
“头衔”：“家”，
“链接”：“/主页”
},
{
“标题”：“行动”，
“链接”：“/操作”
},
{
“标题”：“过去的SDQ”，
“链接”：“/过去的sdq”
},
{
“标题”：“账户”，
“链接”：“/帐户”
}/*,
{
“标题”：“子页面测试”，
“链接”：“/sub”，
“儿童”：[
{
“标题”：“子项”，
“链接”：“/子项”
}
]
}*/
];
控制台日志（“菜单”，菜单）；
返回(
站点导航
{
menu.map（项=>{
if（item.hasOwnProperty（'children'）&&item.children.length>0）{
//如果标题菜单带有子菜单，请使用子菜单组件
返回(
{item.children.map（函数（child））{
//如果lang文件列出了子项的其他子项，则生成一个分组菜单组件
if（child.hasOwnProperty（'children'））{
返回(
{child.children.map（函数（孙子，索引）{
返回(
{孙辈头衔}
)
}，这个）}
)
}否则{
//使用不带组样式的子菜单项
返回(
{child.title}
)
}
}，这个）}
)
}否则{
//如果菜单没有子元素-没有下拉菜单的简单导航元素
返回(
{item.title}
)
}
}，本页）
}
{/*大标题*/}
{
menu.map（项=>{
if（item.hasOwnProperty（'children'）&&item.children.length>0）{
//如果标题菜单带有子菜单，请使用子菜单组件
返回(
{item.children.map（函数（child））{
//如果lang文件列出了子项的其他子项，则生成一个分组菜单组件
if（child.hasOwnProperty（'children'））{
返回(
{child.children.map（函数（孙子，索引）{
返回(
{孙辈头衔}
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Menu, Icon, Alert } from 'antd'

// assets
import LogoImage from '../../img/logo.png'

// css
import './header.scss'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

// this is a class because it needs state
class Header extends Component {

  constructor (props) {
    super(props)
    //console.log(this.props.current)
    this.state = {
      isHamburgerOpen: false,
      current: this.props.current,
    }
    this.toggleHamburgerIcon = this.toggleHamburgerIcon.bind(this)
    //this.renderMenu = this.renderMenu.bind(this)
  }

  toggleHamburgerIcon () {
    this.setState(prevState => ({
      isHamburgerOpen: !prevState.isHamburgerOpen
    }))
  }

  handleClick = (e) => {
    //console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }
  componentWillMount () {
    console.log('will mount')
  }

  componentWillUnmount() {
    console.log('unount mount')
  }
  componentDidMount() {    
    console.log('did mount')
    // window.location.pathname.substr(1)
  }

  renderMenu (menu, variant) {
        return (
            <Menu
                 className={variant === "desktop" ? 'show-for-large-up desktop-menu' : ''}
                 mode={variant === "desktop" ? 'horizontal' : 'inline'}
                 onClick={this.handleClick}
                 selectedKeys={[this.state.current]}
              > 
            {
              menu.map(item => {
                if (item.hasOwnProperty('children') && item.children.length > 0) {
                  //if the header menu comes with children make use of the submenu component

                  return (
                    <SubMenu className='menu-gtm' key={item.title} title={<span>{item.title}<Icon type='down' /></span>}>
                      {item.children.map(function (child) {
                        //If the lang file list additional children of the child, produce a grouped menu component                               
                        if (child.hasOwnProperty('children')) {
                          return (
                            <MenuItemGroup style={{textTransform: 'uppercase'}} key={item.title + ':' + child.title} title={child.title}>
                              {child.children.map(function (grandChild, index) {
                                return (
                                  <Menu.Item className='menu-gtm-bundle' key={grandChild.title + index}>
                                    <Link to={grandChild.link}>
                                      {grandChild.title}
                                    </Link>
                                  </Menu.Item>
                                )
                              }, this)}
                            </MenuItemGroup>
                          )
                        } else {
                          //use a submenu item without group style
                          return (
                            <Menu.Item className='menu-gtm-service' key={item.title + ':' + child.title}>
                              <Link to={child.link}>
                                {child.title}
                              </Link>
                            </Menu.Item>
                          )
                        }
                      }, this)}
                    </SubMenu>
                  )
                } else {
                  //If the menu has not child elements - simple nav elements without dropdown menu
                  return (
                    <Menu.Item className='menu-gtm' key={item.title}>
                      <Link to={item.link}>{item.title}</Link>
                    </Menu.Item>
                  )
                }
              }, this)

            }
          </Menu>
        )
    }


  render () {
    //console.log('this.state', this.state)
    //console.log('this.props.current', this.props.current)

    var menu = [
          {
            "title" : "Home",
            "link"  : "/home"
          },
          {
            "title" : "Actions",
            "link"  : "/actions"
          },
          {
            "title" : "Past SDQS",
            "link"  : "/past-sdq"
          },
          {
            "title" : "Account",
            "link"  : "/account"
          }/*,
          {
            "title"    : "Error1",
            "link"     : "/xxx",
            "children" : [
              {
                "title" : "Error2",
                "link"  : "/yyy"
              }
            ]
          }*/
        ];

        console.log("menu", menu);

        /*
        this.setState({
          current: "",
        });
        */

    return (
      <div>

        <nav className={`HeaderLandingNavOffcanvas ${this.state.isHamburgerOpen ? 'show' : ''}`}>
          <h1 className='display-none nocontent'>Site navigation</h1>
          <i className='anticon anticon-close closeOffsiteMenu' onClick={this.toggleHamburgerIcon}/>
          <div className='row grid__row--offset--30'>
            <div className='small-58 small-centered columns'>              
                {this.renderMenu(menu, "mobile")}
            </div>
          </div>
        </nav>

        {/* Large Header */}
        <header className='ant-design-header transition show-for-large-up transparent'>
          <Row align='middle' type='flex' className='header-row-offset' style={{height: '100%'}}>
            <Col span={24}>
              <div className="header-wrap">
                <Row align='middle' type='flex' className='header-row-offset'>

                  <Col xs={10} sm={6} md={6}>
                    <Link to='/'>
                      <img className='-logo transition' src={LogoImage} alt='logo' />
                    </Link>                  
                  </Col>                
                  <Col xs={0} sm={0} md={18}>
                    {this.renderMenu(menu, "desktop")}
                  </Col>

                  <Col xs={{ span: 4, offset: 10 }} sm={{ span: 4, offset: 14 }} md={0}>
                    <div style={{ float: 'right', height: '50px', marginRight: '10px' }}>
                      <div className={`hamburger--elastic hamburger hamburger_nav_button right-off-canvas-toggle ${this.state.isHamburgerOpen ? 'is-active' : ''}`} onClick={this.toggleHamburgerIcon} style={{ marginTop: '5px' }}>
                        <span className='hamburger-box'>
                          <span className='hamburger-inner' />
                        </span>
                      </div>
                    </div>
                  </Col>
                </Row>
              </div>
            </Col>
          </Row>
        </header>       

      </div>
    )
  }

}

export default Header