条件渲染

引言

我们知道react是用于构建用户界面的JavaScript库。可以用其创建拥有各自状态的组件，在由这些组件构建更加复杂的UI组件。但是在某些情况下，我们需要根据不同的
条件渲染不同的UI，实现不同的功能。react是用JSX来定义UI组件的，但是它不直接支持循环或条件表达式，即使这样，我们也可以用条件渲染来解决我们的遇到的问题。

在react中条件渲染方法

• if...else
• 使用null阻止渲染
• 元素变量
• 与运算符&&
• 三元运算符
• 立即调用的函数表达式(IIFE)
• 子组件
• 高阶成分(HOC)

if...else

function UserGreeting(props){
	return 
Welcome back!
}
function GusetGreeting(props){
	return 
Please sign up.
}
function Greeting(props){
	const isLoggedIn = props.isLoggedIn;
	if(isLoggedIn){
		return ;
	}
	return ;
}

ReactDOM.render(
	,
	document.getElementById('condition')
)

上面的代码中，会根据用户是否登录来决定显示上面哪一个组件

使用null阻止渲染

在极少数情况下，你可能希望能隐藏组件，即使他已经被其他组件渲染。若要完成此操作，可以让
render方法直接返回null，而不进行任何渲染

下面示例中，会根据prop中warn的值来进行渲染，如果warn
的值是false，那么组件则不会渲染

function WarningBanner(props){
	if(!props.warn){
		return null
	}
	return (
		
warning!
	)
}
class Page extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			showWarning:true
		};
		this.handleToggleClick = this.handleToggleClick.bind(this);
	}
	handleToggleClick(){
		this.setState(state => ({
			showWarning:!state.showWarning
		}))
	}
	render(){
		return(
			

				
				
					{
						this.state.showWarning?'Hide':'Show'
					}
				
			
		)
	}
}

ReactDOM.render(,document.getElementById('warning'))

元素变量

你可以使用变量来储存元素，他可以帮助你有条件地渲染组件一部分，而其他的渲染部分并不会因此而改变

下面例子中，我们创建了两个函数组件，分别代表了登录和登出按钮，同事创建一个名为LoginControl
的又状态的组件，它将会根据当前的状态来渲染或者。同时它还会
渲染上一个示例中的

function LoginButton(props){
	return (
		Login
	)
}

function LogoutButton(props){
	return(
		logout
	)
}

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;
		if(isLoggedIn){
			button = 
		}else{
			button = 
		}
		return(
			

				
				{button}
			
		)
	}
}

ReactDOM.render(,document.getElementById('login-btn'))

与运算符&&

通过花括号包裹代码，你可以在JSX中嵌入任何表达式。这也包括JavaScript中的逻辑与(&&)
运算符。他可以很方便地进行元素的条件渲染。

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('mail-box')
)

之所以能这样做，是因为在JavaScript中，true&&expression总是会返回expression
而false&&expression总是会返回false。

因此，如果条件是true，&&右侧的元素就会被渲染，如果是false,React会忽略并跳过它。

三元运算符

另一种内联条件渲染的方法是使用JavaScript中的三目运算符condition?true:false

将组件中的render改为如下

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

				
				{isLoggedIn?:}			
			
		)
	}

立即调用的函数表达式(IIFE)

立即执行函数如下面代码所示

(function myFunction(/*arguments*/){})(/*arguments*/)

当深陷JSX代码中，又想写一大块逻辑时，除了回到上方，还可以使用IIFE：

function render(){
	return(
		

			{
				(() =>{
					if(renderComponent1){
						return 
					}else{
						return 

					}
				})()
			}
		
	)
}

子组件

这是IIFE的变种，也就是把这段位立即执行函数替换成一个普通函数：

function render(){
	return(
		

			
		
	)
}
function SubRender(){
	if(renderComponent1){
		return 
	}else{
		return 

	}
}

高阶组件

高阶组件，就是返回一个新组件的函数，并且接收一个组件作为参数。

那么我们就能在高阶组件里写条件语句，返回不同的组件即可

function highrOrderComponent(component){
	return function EnhancedComponent(props){
		if(condition){
			return 
		}
		return 
	}
}