React官方文档学习记录(四)- 条件渲染

一点点记录,建议需要学习React的移步官方文档去学习。

在React中,你可以创建一个清晰(distinct)的组件来简要描述你现在需要的东西。然后,你只需要使用你应用中的state来渲染它们。

React中的条件型渲染跟JavaScript中的条件运算符运行方式差不多。好像就是使用JavaScript中的if或者三元运算符创建元素来显示现在的状态,然后让React更新UI来匹配这些修改。

下面这个例子就是根据不同的isLoggedIn进行不同的欢迎。

1
2
3
4
5
6
7
8
9
10
11
12
13
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);

元素变量(element variables)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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 = null;
if (isLoggedIn) { //这里根据不同的值对button进行赋值
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);

如果你觉得上述的代码非常的冗长,React有更短的哦
1.inline if with logical && Operator(这个地方我不会翻译)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
//就在下面这里
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);

这个的意思就是使用了 true && 表达式,如果是false &&的话就相当于false。

因此当表达式是true的时候,这个紧跟&&的元素就会在输出结果中显示,否则React就忽视并跳过它。

2.这种方式就是使用JavaScript中的三元运算符condition? true : false,下面的例子中我们使用这个来进行条件性地渲染一小块的文本。

1
2
3
4
5
6
7
8
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}

当然你也可以这么复杂地写:

1
2
3
4
5
6
7
8
9
10
11
12
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}

这一切都是取决于你和你的码友觉得哪种方式更加易读吧,但是当判断表达式非常多的时候,请注意学会拆分组件!!!

不让组件渲染

当你在某些情况下不想让组件渲染的时候,请使用return null这样就可以隐藏它啦

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function WarningBanner(props) {
// WarningBanner这个组件渲染与否取决于props.warn的值
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
ReactDOM.render(
<Page />,
document.getElementById('root')
);

当从组件的render()中返回null的时候,是不会影响组件的生命循环方法的。这就意味着componentDidMountcomponentWillUnmount方法仍然是会被调用的哦。