Question

我想在用户登录我的网站后在下拉按钮上显示用户名。但是，如何使用React-Bootstrap完成？

我的下拉按钮代码如下所示。

<DropdownButton title="Dropdown" id="bg-nested-dropdown">
  <MenuItem eventKey="1">Account</MenuItem>
  <MenuItem eventKey="2">Log Out</MenuItem>
</DropdownButton>

我想将标题更改为用户名，以便他/她可以通过在下拉按钮上查看用户名来确认他们确实已登录。

我可以使用EJS轻松检索用户名。

<% if (!user) { %>
  some text
<% } else { %>
  <%= user.username %>
<% } %>

但是，我想在下拉按钮上显示用户名（user.username）。

Answer 1

你可以这样做：

<DropdownButton title="Dropdown" id="bg-nested-dropdown">
  <MenuItem eventKey="1">Account</MenuItem>
  <MenuItem eventKey="2">Log Out</MenuItem>
  { user ? <MenuItem eventKey="x">{ user.username }</MenuItem> : <MenuItem eventKey="y">Some text</MenuItem> }
</DropdownButton>

Answer 2

吉拉德的回答对我有意义，但我自己从未尝试过。

也许有些事情需要考虑：

您是否在任何地方跟踪状态，是否可以将用户对象置于此反应按钮的外状态？
你试过这个吗？用户？
您是否尝试使用用户名创建一个EJS元素（如＆lt; p＆gt;），并告诉React加载它是否存在？

这些都不可能做到，但嘿。我将在接下来的几天里做这样的工作，如果我找到了什么就会更新。

Answer 3

最好使用<Dropdown/>代替<DropdownButton/>

示例：

<Dropdown id="language-selector-in-header">
    <Dropdown.Toggle>
      <i className={iconClass}></i> Some text or other html elements
    </Dropdown.Toggle>
    <Dropdown.Menu>
      <MenuItem eventKey="en"><i className="flag-icon flag-icon-us"></i> English</MenuItem>
    </Dropdown.Menu>
  </Dropdown>

如何使用React-Bootstrap和EJS在下拉按钮上显示用户名？

3 个答案: