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

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

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

<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）。

来源

2016-06-11 tet

你可以这样做：

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

来源

2016-06-11 08:29:18

它说用户没有定义。我错过了什么吗？ – tet

如果您使用的是EJS，那么您会从哪里获取'user'变量？在你的反应组件中使用相同的。 –

谢谢你的回答，但我仍然在努力解决这个问题。我已经在这样的EJS中设置了用户变量。 router.get（“/”，function（req，res）{res.render（“Index”，{user：req.user}）;我可以看到变量设置正确，因为没有行“{user？< MenuItem eventKey ......“，它可以在索引页上的任何地方返回用户名，除了使用React-Bootstrap组件的地方，在这种情况下，DropdownButton。 – tet

吉拉德的答案对我来说很有意义，但我从来没有尝试过这个自己。

也许有些事情要考虑：

你跟踪状态的任何地方，你可以把你的用户对象进入状态超出这个反应按钮？
你试过这个用户吗？
您是否尝试过使用用户名创建一个EJS元素（如< p>），并告诉React如果它存在？

这些都不能做，但嘿。我将在接下来的几天里做这样的工作，如果我弄清楚什么，我会更新。

来源

2016-06-14 20:56:26 alphanumeric0101

我跟踪'user'中的状态，并且是我可以在反应按钮外面的任何地方使用这个'user'我试过这个用户，但是没有工作我试着用用户名创建一个EJS元素，它除了React按钮之外的任何地方都可以工作React返回一个消息如果我可以将用户变量传递给React，这个问题就可以解决，我很感谢你的任何更新，谢谢 – tet

ok我的意思是，如果你可以保存用户对象的状态，那么从React组件内部，您通常只需要执行this.state.user。用户名如果你有getInitiatState（）=>保存在用户进入状态{用户：用户}或者你有什么 – alphanumeric0101

哦，原谅我缺乏作出反应的知识，但我认为getInitialState使用，只有当你在做客户端侧。如果我不能通过'{user？ tet

其更好地使用<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>

来源

2016-06-16 10:35:27

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

回答

相关问题