作为反应的反应传递组件

Question

我想要将组件传递给另一个组件作为prop，组件需要根据用户是否经过身份验证进行更改，在下面的示例中，我的组件正在呈现，但组件正在通过导航prop不是，

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')); 

如果我这样做，

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

它工作正常，但我需要出示注销用户不同的导航栏。

Answer 1

你应该能够做到这一点

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

Answer 2

你不需要的动作结合()=>{}

就做这样的

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

Answer 3

我觉得像“清洁”的做法会将布尔值作为prop传递给Layout组件（例如<Layout authenticated={authenticated}）。

然后在Layout组件返回（或渲染）：

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

我假设你的布局组件更为复杂（这是一个容器），所以最好让它决定什么应该被渲染。