React学习笔记之条件渲染一

前言

在React中，你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分，这取决于应用的state（状态）。下面就来看看详细的介绍：

条件渲染

可以根据state的值进行组件的条件渲染。例如：

rush:js;"> function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ; }

ReactDOM.render(
// Try changing to isLoggedIn={true}:

,document.getElementById('root') );

你还可以用变量去存储组件，以便进行条件筛选，使得渲染函数的返回值更加清爽，例如：

rush:js;"> 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') );

还可以使用短操作符来实现条件筛选，可以用更短的代码写出渲染结果。例如&&来替代if，?:来替代if else,例如：

rush:js;"> 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') );

rush:js;"> render() { const isLoggedIn = this.state.isLoggedIn; return (

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

); }

这种跟更大的表达式的写法也可以，但是不推荐，因为代码就不是很直观了。

rush:js;"> render() { const isLoggedIn = this.state.isLoggedIn; return (

{isLoggedIn ? ( ) : ( )}

); }

如果组件有时候需要渲染出来，而有时候不需要渲染出来，在不需要渲染的时候返回null即可。例如：

rush:js;"> function WarningBanner(props) { if (!props.warn) { return null; }

return (
<div className="warning">
Warning!

); }

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 (

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

); } }

ReactDOM.render(

,document.getElementById('root') );