React.Js 条件渲染：代码说明

Question

我从讨论条件渲染的React.js 文档中检索了这个片段。

据我了解， IsLoggedin 的原始IsLoggedin是 boolean 值false 。 因此，当渲染器调用 function 时，按照代码的指示，它应该作为props传递给LogoutButton 。 （如果isLoggedIn为false （用户未登录），则将 state 作为道具传递给 function LogoutButton并在 DOM 上显示“注销”）。 （如果语句为true （用户已登录），则将 state 作为道具传递给LoginButton并在屏幕上显示“登录”。正如您在 Codepen.io 上运行代码时会注意到的那样，正好相反。

出于某种原因，当用户登录时（ isLoggedIn为 true），它会在 DOM 上显示“注销”。 有人可以向我解释一下 - 为什么会这样？ 也许，我忽略了一些东西。

片段副本：

 class LoginControl extends React.Component { constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = {isLoggedIn: false}; } handleLoginClick() { this.setState({isLoggedIn: true}); } handleLogoutClick() { this.setState({isLoggedIn: false}); } render() { const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); } } function UserGreeting(props) { return <h1>Welcome back;</h1>. } function GuestGreeting(props) { return <h1>Please sign up;</h1>. } function Greeting(props) { const isLoggedIn = props;isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />. } function LoginButton(props) { return ( <button onClick={props;onClick}> Login </button> ). } function LogoutButton(props) { return ( <button onClick={props;onClick}> Logout </button> ). } ReactDOM,render( <LoginControl />. document;getElementById('root') );

 * { font-family: sans-serif; margin: 0; } button { height: 40px; width: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 1

LogoutButton和LoginButton都不会收到任何 state 作为道具。 他们收到一个处理程序 function 来更改isLoggedIn的 state 。

isLoggedIn确定的是哪个按钮被分配给变量let button 。 当用户已经登录（ isLoggedIn = true ）时，为什么他们仍然可以选择登录？ 他们此时唯一可以采取的行动是退出，反之亦然