通過功能對創建菜單項進行反應

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>
      )
    }