Question

我正在尝试根据用户登录进行条件渲染。我有一个Login组件，正在通过customerLogin和setCustomerLogin传递用户名和密码的挂钩：

function App() {

    const [customerLogin, setCustomerLogin] = useState([
        { username: "", password: "" }
    ]);

    return(
        <div className="App">
            <Navbar />
            <Switch>
                <Route path='/signup' component={Signup}/>                    
                <Route 
                    path='/login' 
                    render={() =>
                        <Login
                            customerLogin={customerLogin}
                            setCustomerLogin={setCustomerLogin}
                        />}
                    />
            </Switch>
        </div>
    );
}

我想根据customerLogin是否为空字符串以及用户是否已登录并将customerLogin设置为用户名来进行条件渲染。我想在Navbar组件中使用两个组件SignedInLinks和SignedOutLinks：

const Navbar = () => {
    return (
        <nav className="nav-wrapper">
            <div className="container">
                <Link to='/' className="brand-logo left">Cars4U</Link>
                    <SignedOutLinks />             
            </div>
        </nav>
    )
};

export default Navbar

Answer 1

嗯。我想到的最简单的解决方案是在Navbar组件中传递一个布尔值。

<Navbar isLoggedIn={!!customerLogin} />

然后在导航栏组件上

export const Navbar = ({ isLoggedIn }) => {
  return (
    <div className="container">
      {isLoggedIn ? <SignedInLinks /> : <SignedOutLinks />}
    </div>
  )
}

React-将状态作为道具传递给另一个组件

1 个答案: