Question

如何将cls.id传递到href中以进行响应的按钮下拉菜单？如您在href部分href="/teams/{cls.id}中看到的那样，它似乎不起作用。

return (
          <DropdownButton id="dropdown-team-button" title={this.props.team_name}>
              {this.state.data.map(cls => (
                  <div key={cls}>
                      <Dropdown.Item onClick={this.handleTeamSelection} href="/teams/{cls.id} "title={cls.name}>{cls.name}</Dropdown.Item>
                  </div>
              ))}
          </DropdownButton>
        )
      }

Answer 1

有两种常见的实现方式：

经典Javascript语法：

href={'/teams/' + cls.id}

ES6 Javascript版本上的模板文字：

href=`/teams/${cls.id}`

两者都一样，并且工作完全相同。

有关ES5和ES6上模板字符串/文字的更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 2

尝试一下

<DropdownButton id="dropdown-team-button" title={this.props.team_name}>
              {this.state.data.map(cls => (
                  <div key={cls}>
                      <Dropdown.Item onClick={this.handleTeamSelection} href=`/teams/${cls.id}` title={cls.name}>{cls.name}</Dropdown.Item>
                  </div>
              ))}
          </DropdownButton>

下拉按钮反应将json ID传递到HREF

2 个答案: