React可以创建不同的组件来封装各种行为,还可以根据应用状态变化只渲染其中的一部分。
React 中的条件渲染和JavaScript一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。
上面的介绍可能不直观,通常来说,条件渲染就是通过条件不同来渲染不同的页面,类似于其他编程语言中的if else
下面是一个非常典型的条件渲染例子,根据用户是否登录来动态展示提示信息
import React from "react"
import ReactDOM from "react-dom"
function UserGreeting(props) {
return <h1>欢迎光临!</h1>;
}
function GuestGreeting(props) {
return <h1>您还没有注册,即将跳转到注册页面</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
结果:
通过上面的例子,相信应该清楚了条件渲染的概念了
8.2 元素变量
在实际编程中可以使用变量来储存元素。它可以有条件的渲染组件的一部分,而输出的其他部分不会更改。
如下例子所示:
import React from "react"
import ReactDOM from "react-dom"
function UserGreeting(props) {
return <h1>greeting3</h1>
}
function GuestGreeting(props) {
return <h1>please reg3</h1>
}
function Greeting(props) {
const isLogIn = props.isLogIn
if (isLogIn) {
return <UserGreeting />
} else {
return <GuestGreeting />
}
}
function LogInButton(props) {
return <button onClick={props.onClick}>
login
</button>
}
function LogOutButton(props) {
return <button onClick={props.onClick}>
logout
</button>
}
class LoginController extends React.Component {
constructor(props) {
super(props)
this.logInClick = this.logInClick.bind(this)
this.logOutClick = this.logOutClick.bind(this)
this.state = {isLogIn : true}
}
logInClick() {
this.setState({
isLogIn : true
})
}
logOutClick() {
this.setState({
isLogIn : false
}
)
}
render() {
const isLogIn = this.state.isLogIn
let button
if (isLogIn) {
button = <LogOutButton onClick={this.logOutClick}/>
} else {
button = <LogInButton onClick={this.logInClick}/>
}
return (
<div>
<Greeting isLogIn={false}/>
{button}
</div>
)
}
}
ReactDOM.render(
<LoginController />,
document.getElementById("root")
)
结果:
8.3 与运算符 &&
React支持通过用大括号包裹代码在 JSX 中嵌入任何表达式 ,也包括 JavaScript 的逻辑与 &&,可以方便地条件渲染一个元素。
用过javascript的伙伴都知道,在JavaScript 中,true && expression 总是返回后面的expression,而 false && expression 总是返回 false。因此,如果条件是 true,&& 右侧的元素就会被渲染,如果是 false,React 会忽略并跳过它。
下面例子演示了这个功能
import React from "react"
import ReactDOM from "react-dom"
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>邮箱</h1>
{unreadMessages.length > 0 &&
<h2>
您有 {unreadMessages.length} 条未读信息。
</h2>
}
</div>
);
}
const messages = ['message1', 'message2', 'message3'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
结果:
8.4 list使用
import React from "react"
import ReactDOM from "react-dom"
const numbers = [1, 2, 3, 4, 5]
const listnumbers = numbers.map((item) =>
<li>{item + 1}</li>
);
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
<ul>{listnumbers}</ul>
)
结果: