React 通过函数创建菜单项答案

【问题标题】：React Creating Menu items by a functionReact 通过函数创建菜单项
【发布时间】：2019-05-13 18:51:46
【问题描述】：

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

   <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'......

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你试过了吗：

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

【讨论】：

谢谢@Dennis，我已经为它设置了一个功能，并且通过以下更改，我让它恢复了工作。

【解决方案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>
      )
    }

【讨论】：