在React中有条件地渲染组件

Question

I'm conditionally rendering components on the home page based on whether the user is logged in or not. This is my code,

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

Since the header component is being rendered irrespective, How can I refactor this code to only render only the Core section conditionally? I'm new to React thus the question.

Answer 1

Simply take the stuff that is common and pull it out, then use {} to do the conditional. You can also just return without the variable:

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

If the components take the same exact properties, you could alternatively just put that component itself in a variable:

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

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

Note that in this case, the variable must start with a capital letter or React will try to render it as a built-in HTML component instead.