條件渲染
在React中，可以創(chuàng)建不同的組件來(lái)封裝各種所需要的行為浦译，也可以根據(jù)應(yīng)用的變換狀態(tài)只更新其中一部分住涉。
首先創(chuàng)建一個(gè)Gretting組件缩挑，他會(huì)根據(jù)用戶(hù)是否登錄來(lái)顯示不同的內(nèi)容。
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 />
}else{
return <GuestGreeting />
}
}
ReactDOM.render(
<Greeting isLoggedIn={false} />,
document.getElementById('root')
)
元素變量
你可以使用變量來(lái)儲(chǔ)存元素扎即，可以用來(lái)有條件的渲染組件的一部分吞获，輸出的其他部分則不用修改。
以下的2個(gè)組件分別代表 注銷(xiāo) 和 登錄
//定義一個(gè)登錄按鈕小組件
function LoginButton(props){
return (
<button onClick={props.onClick}>
Login
</button>
)
}
//定義一個(gè)登出按鈕小組件
function LogoutButton(props){
return (
<button onClick={props.onClick}>
Logout
</button>
)
}
然后谚鄙，我們開(kāi)始創(chuàng)建一個(gè)LoginControl的組件
他會(huì)根據(jù)當(dāng)前狀態(tài)來(lái)渲染<LoginButton />和<LogoutButton />以及顯示的<Greeting />的內(nèi)容
//登錄狀態(tài)1
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
//登錄狀態(tài)2
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
//條件渲染提示狀態(tài)語(yǔ)
function Greeting(props){
const isLoggedIn = props.isLoggedIn;
if(isLoggedIn){
return <UserGreeting />
}else{
return <GuestGreeting />
}
}
//創(chuàng)建一個(gè)按鈕登錄小組件
function LoginButton(props){
return (
<button onClick={props.onClick}>
Login
</button>
)
}
//創(chuàng)建一個(gè)按鈕登出小組件
function LogoutButton(props){
return (
<button onClick={props.onClick}>
Logout
</button>
)
}
//創(chuàng)建一個(gè)登錄狀態(tài)控制組件
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 = <LoginButton onClick={this.handleLogoutClick} />
}else{
button = <LogoutButton onClick={this.handleLoginClick} />
}
return(
<div class="box">
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
)
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
)
使用變量并且使用if語(yǔ)句各拷，是條件渲染組件不出的方式，但有時(shí)候可以使用更加簡(jiǎn)潔的方式闷营，可以使用jsx的方式
1.與運(yùn)算符&&
可以使用花括弧包裹代碼嵌入jsx中烤黍，其中包括js邏輯與&&，他能很方便的渲染一個(gè)元素
function Mailbox(props){
const unreadMessage = props.unreadMessage;
return(
<div>
<h1>hello</h1>
{unreadMessage.length>0&&
<h2>you have {unreadMessage.length} unread message</h2>
}
</div>
)
}
const message = ['react','reactdom','redux'];
ReactDOM.render(
<Mailbox unreadMessage={message} />,
document.getElementById('root')
)
//返回 you have 3 unread message
之所以可以這樣做，是因?yàn)樵趈avascript中蚊荣，true&&表達(dá)式初狰，會(huì)返回表達(dá)式，而false&&表達(dá)式互例，會(huì)返回false奢入，false就會(huì)忽略跳過(guò)。
2.三目運(yùn)算符
條件如果成立媳叨，執(zhí)行do someting腥光，否則執(zhí)行冒號(hào)后語(yǔ)句
condition?'do someting':'do noting'
condition?true:false
demo有條件的渲染
//demo1
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
//demo2
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
像在 JavaScript 中一樣，你可以根據(jù)團(tuán)隊(duì)的習(xí)慣選擇更易讀的方式糊秆。還要記住如果條件變得過(guò)于復(fù)雜武福，可能就是提取組件的好時(shí)機(jī)了。
3.阻止組件的渲染
在極少的情況下痘番，你可能希望隱藏組件捉片，即使其他組件會(huì)渲染該組件，讓render方法返回null汞舱，而不產(chǎn)生他的渲染結(jié)果伍纫，就可以實(shí)現(xiàn)這個(gè)需求。
在下面的例子中昂芜，<WarningBanner /> 根據(jù)屬性 warn 的值條件渲染莹规。如果warn 的值是 false，則組件不會(huì)渲染：
function WarningBanner(props){
if(props.warn){
return null //或者return false 此處可以停止組件渲染
}
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?'warning的值為true':'warning的值為false'}
</button>
</div>
)
}
}
ReactDOM.render(
<Page />,
document.getElementById('root')
)
注意：
組件的render()方法返回null泌神，并不會(huì)影響他的生命周期方法的回調(diào)良漱，例如componentWillUpdate和componentDidUpdate,依然可以使用。
