React-Pass-Komponente als reagieren

Question

Ich möchte eine Komponente an eine andere Komponente als prop übergeben, die Komponente muss sich ändern, ob der Benutzer authentifiziert ist, in dem Beispiel unterhalb meiner Komponente wird gerendert, aber die Komponente über übergeben die Navigations prop ist nicht,

import React from 'react'; 
import { render } from 'react-dom'; 

import Layout from './core/Layout'; 

import LoggedInHeader from './core/LoggedInHeader'; 
import LoggedOutHeader from './core/LoggedOutHeader'; 

const authenticated = false; 

const App =() => (
    <div> 
    <Layout navigation={() => authenticated ? <LoggedInHeader /> : <LoggedOutHeader /> } /> 
    </div> 
); 

render(<App />, document.getElementById('root')); 

Wenn ich das tue,

<Layout navigation={<LoggedInHeader />} /> 

Es funktioniert gut, aber ich brauche eine abgemeldet Benutzer eine andere Navigationsleiste anzuzeigen.

Answer 1

Sie sollten in der Lage sein, dies zu tun

<Layout navigation={authenticated ? <LoggedInHeader /> : <LoggedOutHeader /> } /> 

Answer 2

Sie brauchen nicht die Aktion Bindung ()=>{}

Just do it wie diese

<Layout navigation={ authenticated ? <LoggedInHeader /> : <LoggedOutHeader /> } /> 

Answer 3

Ich mag die 'sauberere' Ansatz fühlen Boolean als Prop zu der Layout Komponente (zB <Layout authenticated={authenticated}) übergeben werden.

Dann in der Layout Komponente zurückkehren Sie (oder machen):

<div> 
    {this.props.authenticated ? (
    <LoggedInHeader /> 
) : (
    <LoggedOutHeader /> 
)} 
</div> 

Ich gehe davon aus, das Layout Komponente komplizierter ist (es ist ein Container), so ist es besser, sie entscheiden zu lassen, was gemacht werden soll.