在React中有條件地渲染組件

Question

我有條件地根據用戶是否登錄在主頁上呈現組件。 這是我的代碼

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

由於標頭組件的顯示方式無關，我該如何重構此代碼以僅有條件地僅渲染Core部分？ 我是React的新手，所以這個問題。

Answer 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組件。