学习React(14) - 条件渲染 (conditional rendering)
当我们要建立react app的时候，你有可能需要展示或者隐藏某些HTML内容基于某些条件。很幸运的，条件渲染在React的做法跟javascript是一样的。在React中，一共有四种方法。
- if / else
- Element variable
- Ternary conditional operator
- short circuit operator
小记：在VS Code，如果想使用class component, 那么可以打rce，然后按Enter键，就出现了，代码如下：
import React, {
Component } from 'react'
export class Usergreeting extends Component {
render() {
return (
<div>
</div>
)
}
}
export default Usergreeting
但是，得把class前面的export去掉。就变成这样：
import React, {
Component } from 'react'
class Usergreeting extends Component {
render() {
return (
<div>
</div>
)
}
}
export default Usergreeting
但是，在class里，得有构造函数吧，同样也可以用快捷输入，来快速有构造函数出来。在render() 的上面输入rconst, 然后按enter键，就出现了。结果如下：
import React, {
Component } from 'react'
class Usergreeting extends Component {
// 输入 “rconst”
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
<div>
Welcoming
</div>
)
}
}
export default Usergreeting
现在来说说，在React中，如何用if 语句。还是先得在src文件夹中创建一个文件，名叫做Usergreeting.js. 下面是代码：
// Usergreeting.js 文件
import React, {
Component } from 'react'
class Usergreeting extends Component {
// 输入 “rconst”
constructor(props) {
super(props)
this.state = {
isLoggedIn: false
}
}
render() {
if(this.state.isLoggedIn){
return (
<div>
Welcomg
</div>
)
} else {
return (
<div>
Welcome Guest
</div>
)
}
}
}
export default Usergreeting
在App.js中，是这么显示：
// App.js 文件
import React from 'react';
import './App.css';
import Usergreeting from './Usergreeting'
function App() {
return (
<div className="App">
<Usergreeting />
</div>
);
}
export default App;
结果如下：
因为，在Usergreeting.js 文件中已经声明了false了，所以就输出Welcome Guest了。
现在来讲讲使用Element variables在React中如何用。还是同一个JS文件。
// Usergreeting.js 文件
import React, {
Component } from 'react'
class Usergreeting extends Component {
// 输入 “rconst”
constructor(props) {
super(props)
this.state = {
isLoggedIn: false
}
}
render() {
/*
// If 语句
if(this.state.isLoggedIn){
return (
Welcomg
)
} else {
return (
Welcome Guest
)
}
*/
// Element Variables
let message;
if(this.state.isLoggedIn){
message = <div>Welcome </div>
} else {
message = <div>Welcome Guest</div>
}
return <div>{
message}</div>
// return message; // 这种写法，博主试了，是可以的
}
}
export default Usergreeting
App.js 文件保持不变，结果跟上面显示的一样。
下面将显示Ternary conditional operator做法：
// Usergreeting.js 文件
import React, {
Component } from 'react'
class Usergreeting extends Component {
// 输入 “rconst”
constructor(props) {
super(props)
this.state = {
isLoggedIn: false
}
}
render() {
/*
// If 语句
if(this.state.isLoggedIn){
return (
Welcomg
)
} else {
return (
Welcome Guest
)
}
*/
/*
// Element Variables
let message;
if(this.state.isLoggedIn){
message = Welcome
} else {
message = Welcome Guest
}
return {message}
// return message;
*/
// Ternary conditional operator
return (
this.state.isLoggedIn ?
<div>Welcomg</div> :
<div>Welcome Guest</div>
)
}
}
export default Usergreeting
App.js 文件还是跟上面一样，结果也是一样的。
还是在同一个文件：
// Usergreeting.js 文件
import React, {
Component } from 'react'
class Usergreeting extends Component {
// 输入 “rconst”
constructor(props) {
super(props)
this.state = {
isLoggedIn: false
}
}
render() {
/*
// If 语句
if(this.state.isLoggedIn){
return (
Welcomg
)
} else {
return (
Welcome Guest
)
}
*/
/*
// Element Variables
let message;
if(this.state.isLoggedIn){
message = Welcome
} else {
message = Welcome Guest
}
return {message}
// return message;
*/
/*
// Ternary conditional operator
return (
this.state.isLoggedIn ?
Welcomg :
Welcome Guest
)
*/
// Short circuit operator
return this.state.isLoggedIn && <div>Welcome</div>
}
}
export default Usergreeting
因为在文件中声明了是false, 所以就什么都没显示。
但是，如果改成true，就会显示Welcome的字样。
如果觉得总结挺好的，就用点赞来取代五星好评吧！