小編給大家分享一下React中條件渲染的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供城中網(wǎng)站建設(shè)、城中做網(wǎng)站、城中網(wǎng)站設(shè)計、城中網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、城中企業(yè)網(wǎng)站模板建站服務(wù)，10多年城中做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

前言

在React中，你可以創(chuàng)建不同的組件各自封裝你需要的東西。之后你可以只渲染其中的一部分，這取決于應(yīng)用的state（狀態(tài)）。

條件渲染

可以根據(jù)state的值進(jìn)行組件的條件渲染。例如：

function Greeting(props) { 
 const isLoggedIn = props.isLoggedIn;
 if (isLoggedIn) {
 return ;
 }
 return ;
}

ReactDOM.render( 
 // Try changing to isLoggedIn={true}:
 ,
 document.getElementById('root')
);

你還可以用變量去存儲組件，以便進(jìn)行條件篩選，使得渲染函數(shù)的返回值更加清爽，例如：

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 = ;
 } else {
 button = ;
 }

 return (
 

 
 {button}
 
 );
 }
}

ReactDOM.render( 
 ,
 document.getElementById('root')
);

還可以使用短操作符來實現(xiàn)條件篩選，可以用更短的代碼寫出渲染結(jié)果。例如&&來替代if，?:來替代if else, 例如：

function Mailbox(props) { 
 const unreadMessages = props.unreadMessages;
 return (
 

 
Hello!
 {unreadMessages.length > 0 &&
 

  You have {unreadMessages.length} unread messages.
 
 }
 
 );
}

const messages = ['React', 'Re: React', 'Re:Re: React']; 
ReactDOM.render( 
 ,
 document.getElementById('root')
);

render() { 
 const isLoggedIn = this.state.isLoggedIn;
 return (
 

 The user is {isLoggedIn ? 'currently' : 'not'} logged in.
 
 );
}

這種跟更大的表達(dá)式的寫法也可以，但是不推薦，因為代碼就不是很直觀了。

render() { 
 const isLoggedIn = this.state.isLoggedIn;
 return (
 

 {isLoggedIn ? (
 
 ) : (
 
 )}
 
 );
}

如果組件有時候需要渲染出來，而有時候不需要渲染出來，在不需要渲染的時候返回null即可。例如：

function WarningBanner(props) { 
 if (!props.warn) {
 return null;
 }

 return (
 
 Warning!