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}实际上必须是{{1} } ..

我如上所述尝试过在发送的{Constants.pagesNameHome}前面添加+，但不起作用。.我尝试了page不起作用，我试图创建{Constants.pagesName[page]}然后做{{1 }}也不起作用。我如何获得这项工作？

现在是let pageName = 'pagesName'+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>
      )
    }

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

2 个答案: