如何使用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在下拉按鈕上顯示用戶名？

回答

相關問題