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组件。

在React中有条件地渲染组件

1 个答案: