在 React 中有条件地渲染组件

【问题标题】：Rendering components conditionally in React在 React 中有条件地渲染组件
【发布时间】：2018-06-05 18:12:45
【问题描述】：

我根据用户是否登录有条件地在主页上呈现组件。这是我的代码，

class Wrapper extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        const comp = this.state.loggedIn ? (
            <BrowserRouter>
                <div className="wrapper">
                    <Header state={props.state}/>
                    <CoreLogged state={props.state}/>
                </div>
            </BrowserRouter>

        ):(
            <BrowserRouter>
                <div className="wrapper">
                    <Header state={props.state}/>
                    <CoreUnlogged state={props.state}/>
                </div>
            </BrowserRouter>
        );
        return (comp);
    }
}
export default Wrapper

由于标题组件被渲染，我如何重构此代码以仅有条件地仅渲染核心部分？我是 React 新手，所以这个问题。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

只需把常见的东西拿出来，然后用{}做条件。你也可以不带变量直接返回：

render() {
  return <BrowserRouter>
    <div className="wrapper">
      <Header state={ props.state } />
      { this.state.loggedIn ? (
          <CoreLogged state={ props.state } />
        ) : (
          <CoreUnlogged state={ props.state } />
        )
      }
    </div>
  </BrowserRouter>;
}

如果组件具有相同的确切属性，您也可以将该组件本身放入一个变量中：

render() {
  const MainComp = this.state.loggedIn ? CoreLogged : CoreUnlogged;

  return <BrowserRouter>
    <div className="wrapper">
      <Header state={ props.state } />
      <MainComp state={ props.state } />
    </div>
  </BrowserRouter>;
}

请注意，在这种情况下，变量必须以大写字母开头，否则 React 将尝试将其呈现为内置 HTML 组件。

【讨论】：