react之条件渲染

条件渲染

引言

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

在react中条件渲染方法

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

if...else

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

ReactDOM.render(
	<Greeting isLoggedIn={true} />,
	document.getElementById('condition')
)

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

使用null阻止渲染

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

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

function WarningBanner(props){
	if(!props.warn){
		return null
	}
	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(state => ({
			showWarning:!state.showWarning
		}))
	}
	render(){
		return(
			<div>
				<WarningBanner warn={this.state.showWarning} />
				<button onClick={this.handleToggleClick}>
					{
						this.state.showWarning?'Hide':'Show'
					}
				</button>
			</div>
		)
	}
}

ReactDOM.render(<Page />,document.getElementById('warning'))

元素变量

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

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

function LoginButton(props){
	return (
		<button onClick={props.onClick}>Login</button>
	)
}

function LogoutButton(props){
	return(
		<button onClick={props.onClick}>logout</button>
	)
}

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 = <LogoutButton onClick = {this.handleLogoutClick} />
		}else{
			button = <LoginButton onClick ={this.handleLoginClick} />
		}
		return(
			<div>
				<Greeting isLoggedIn={isLoggedIn} />
				{button}
			</div>
		)
	}
}

ReactDOM.render(<LoginControl />,document.getElementById('login-btn'))

与运算符&&

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

function Mailbox(props){
	const unreadMessages = props.unreadMessages;
	return(
		<div>
			<h1>Hello!</h1>
			{
				unreadMessages.length>0&&
				<h2>you have {unreadMessages.length}unread messages</h2>
			}
		</div>
	)
}
const messages = ['React','Re:React','Re:Re:React'];
ReactDOM.render(
	<Mailbox unreadMessages={messages} />,
	document.getElementById('mail-box')
)

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

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

三元运算符

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

将<LoginControl />组件中的render改为如下

render(){
		const isLoggedIn = this.state.isLoggedIn;
		return(
			<div>
				<Greeting isLoggedIn={isLoggedIn} />
				{isLoggedIn?<LogoutButton onClick = {this.handleLogoutClick} />:<LoginButton onClick ={this.handleLoginClick} />}			
			</div>
		)
	}

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

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

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

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

function render(){
	return(
		<div>
			{
				(() =>{
					if(renderComponent1){
						return <Component1 />
					}else{
						return <div />
					}
				})()
			}
		</div>
	)
}

子组件

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

function render(){
	return(
		<div>
			<SubRender />
		</div>
	)
}
function SubRender(){
	if(renderComponent1){
		return <Component1 />
	}else{
		return <div />
	}
}

高阶组件

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

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

function highrOrderComponent(component){
	return function EnhancedComponent(props){
		if(condition){
			return <AnotherComponent {...props} />
		}
		return <Component {...props} />
	}
}