Wie zeigt man den Benutzernamen auf dem Dropdown-Button mit React-Bootstrap und EJS?

Ich möchte den Benutzernamen auf der Dropdown-Schaltfläche anzeigen, nachdem sich Benutzer auf meiner Website angemeldet haben. Aber wie funktioniert es mit React-Bootstrap?Wie zeigt man den Benutzernamen auf dem Dropdown-Button mit React-Bootstrap und EJS?

Mein Code für die Dropdown-Schaltfläche sieht so aus.

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

Ich möchte den Titel Benutzernamen ändern, so dass er/sie kann bestätigen, dass sie tatsächlich sehen ihre Benutzernamen auf den Dropdown-Button eingeloggt.

Ich kann Nutzername einfach so mit EJS abrufen.

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

Aber, ich möchte den Benutzernamen (user.username) auf den Dropdown-Button zeigen.

Quelle

2016-06-11 tet

Sie tun können:

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

Quelle

2016-06-11 08:29:18

Es sagt sich Benutzer nicht definiert. Fehle ich etwas? – tet

Wenn Sie EJS verwendet haben, woher hätten Sie die Variable 'user' genommen? Verwenden Sie dasselbe in Ihrer Reaktionskomponente. –

Vielen Dank für Ihre Antwort, aber ich kämpfe immer noch um dieses Problem zu lösen. Ich habe die Benutzervariable in EJS so eingestellt. router.get ("/", Funktion (req, res)) {res.render ("Index", {user: req.user}); Ich kann sehen, dass die Variable richtig gesetzt ist, weil ohne die Zeile "{user? < MenuItem eventKey ...... ", es kann den Benutzernamen überall auf der Indexseite zurückgeben, außer dort, wo die React-Bootstrap-Komponenten verwendet werden, in diesem Fall DropDownButton. – tet

Gilad Antwort macht Sinn für mich, aber ich habe das selbst nie versucht.

Vielleicht sind einige Dinge zu beachten:

werden Sie den Überblick über Zustand überall halten und können Sie legen Sie Ihre Benutzerobjekt in den Zustand außerhalb dieser Taste reagieren?
haben Sie this.user ausprobiert?
haben Sie versucht, ein EJS-Element (wie ein < p>) mit dem Benutzernamen zu erstellen und React das Laden zu sagen, wenn es existiert?

keiner von diesen kann es tun, aber hey. Ich werde in den nächsten Tagen so eine Arbeit wie diese machen und werde updaten, wenn ich etwas herausgefunden habe.

Quelle

2016-06-14 20:56:26 alphanumeric0101

Ich verfolge den Status in' user' und ja Ich kann diesen "Benutzer" überall außerhalb der Schaltfläche "react" verwenden. Ich habe this.user ausprobiert, funktioniert aber nicht. Ich habe versucht, ein EJS-Element mit dem Benutzernamen zu erstellen, und es funktioniert überall, außer wo die React-Schaltfläche ist. React gibt eine Nachricht zurück Sprich: "Benutzer ist nicht definiert." Wenn ich die Benutzervariable an Reagieren übergeben könnte, wäre dieses Problem gelöst. Ich schätze jedes Update von Ihnen. Danke. – tet

ok Ich meine, wenn Sie das Benutzerobjekt im Zustand speichern können, dann von innerhalb Ihrer React-Komponente, müssen Sie in der Regel nur einen this.state.user tun.Benutzername Wenn Sie Ihren Benutzer mit getInitiatState() => {user: user} gespeichert haben oder was haben Sie – alphanumeric0101

Oh, Entschuldigung mein Mangel an Wissen über React, aber ich denke, getInitialState wird nur verwendet, wenn Sie Client tun Seite. Wenn ich die Daten nicht mit '{user? tet

Es ist besser zu nutzen <Dropdown/> statt <DropdownButton/>

Beispiel:

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

Quelle

2016-06-16 10:35:27

Wie zeigt man den Benutzernamen auf dem Dropdown-Button mit React-Bootstrap und EJS?

Antwort

Verwandte Themen