javascript - React 将组件传递为 React

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

您不需要操作绑定(bind)()=>{}

就这样吧

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