在React中有条件地渲染组件-Java 学习之路

我有条件地在主页上呈现组件，具体取决于用户是否登录 . 这是我的代码，

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

由于 Headers 组件的呈现是无关紧要的，我如何重构此代码只能有条件地呈现Core部分？因此，我是React的新手 .

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

回复于 2024-04-26T14:53:08+08:00

在React中有条件地渲染组件

1 回答

相关问题