javascript - React.Js 条件渲染:代码说明
问题描述
我从讨论条件渲染的React.js 文档中检索了这个片段。
据我了解, 的原始状态IsLoggedin
是 boolean value false
。因此,当被渲染函数调用时,按照代码的指示,它应该被传递props
给LogoutButton
. (如果isLoggedIn
是false
(用户未登录),则将状态作为道具传递以运行LogoutButton
并在 DOM 上显示“注销”)。(如果语句是true
(用户已登录),则将状态作为道具传递给LoginButton
并在屏幕上显示“登录”。正如您在 Codepen.io 上运行代码时会注意到的那样,恰恰相反。
出于某种原因,当用户登录时(isLoggedIn
为真),它会在 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>
解决方案
既不LogoutButton
也不LoginButton
接受任何状态作为道具。他们收到一个处理函数来改变isLoggedIn
.
决定将哪个isLoggedIn
按钮分配给变量let button
。当用户已经登录(isLoggedIn = true
)时,为什么他们仍然可以选择登录?他们此时唯一可以采取的行动是退出,反之亦然
推荐阅读
- javascript - 如何将数组映射和对象作为值?
- node.js - 如何在 sequelize.js 的嵌套关联中按列分组?
- azure - 加入新组织时出现 Azure DevOps 错误 401
- sql - SQL:如何从一个表中选择一个单元格值作为选择另一个表的条件
- python - Grab a User ID from a dict (Discord.py)
- firefox - FireFox 和 selected="selected"
- redirect - 如何使 OKTA 正确重定向参数化 URL?
- java - 如何在不破坏完整性检查的情况下对包装好的 jar 进行数字签名?
- javascript - 如何打开所有jstree节点(父母和孩子)
- python - 带有分隔符的 to_csv 函数作为管道给出问题