Question

我想将组件作为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

我觉得自己更清洁＆＃39;方法是将boolean作为prop传递给Layout组件（例如<Layout authenticated={authenticated}）。

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

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

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

反应传递组分作为反应

3 个答案: