通过功能对创建菜单项进行反应

Question

我有一个包含以下列表项的菜单

   <MenuItem
      //className={this.classes.menuItem}
      onClick={this.handleClose}
    >
      <NavLink
        to={Constants.pagesURL+page}
        //className={this.classes.menuItemAnchor}
      >
        {Constants.pagesName+page}
      </NavLink>
    </MenuItem>

我想用menuItem(page)函数包装它，所以在页面内，我要做的就是{this.menuItem('Home')} and {this.menuItem('Page1')}以方便地填充菜单项干净..

困难在于我希望将调用函数时发送的名称添加到常量名称中。例如，如果我执行{this.menuItem('Home')}则实际上需要{Constants.pagesName+page} {Constants.pagesNameHome} ..

我如上所述尝试在发送的page前添加+，但不起作用。.我尝试了{Constants.pagesName[page]}不起作用，我试图创建let pageName = 'pagesName'+page; 然后执行{Constants.pagesName}也不起作用。 我如何获得这项工作？

原来是{Constants.pagesURL+page}我得到了'undefinedHome'和'undefinedPage1'...

Answer 1

你试过了吗：

const menuItem = (page) => `${Constants.pagesURL}${page}`;

Answer 2

好的，这很容易实现，就像我预期的那样。.玩转，我认为这是要走的路。

{Constants['pagesURL'+page]}

发挥魅力！

完整代码：

   menuItem(page) {
      return(
        <MenuItem
          //className={this.classes.menuItem}
          onClick={this.handleClose}
        >
          <NavLink
            to={Constants['pagesURL'+page]}
            //className={this.classes.menuItemAnchor}
          >
            {Constants['pagesName'+page]}
          </NavLink>
        </MenuItem>
      )
    }