条件渲染
在React中你可以创建不同的组件封装需要的行为，然后可以根据应用的状态变化只渲染其中的一部分组件。
React中的条件渲染和JavaScript中的一致，可以使用if或者条件运算符来创建表示当前状态的元素，然后让ReactDOM来渲染。
有如下两个组件：
function UserGreeting(props) {
return <h1>Welcome back!</h1>
}
function GuestGreeting(props) {
return <h1>Please sign in!</h1>
}
两个组件，分别表示登录用户的展示信息和未登录用户的展示信息。
所以我们可以根据登录状态，返回不同的组件，让不同登录态的人看到不同的信息。
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />
}
return <GuestGreeting />
}
ReactDOM.render(
<Greeting />, document.getElementById('root')
);
这里就根据是否登录isLoggedIn来分别返回UserGreeting或者GuestGreeting组件。这里的代码并没有设置Greeting的isLoggedIn属性，所以默认值是false，当然也可以在渲染的时候设置他的是:
ReactDOM.render(
<Greeting isLoggedIn={true} />, document.getElementById('root')
);
元素变量
元素变量，就是可以在组件内部定义变量，变量的内容就是一个React元素。下面的例子进行演示：
- 在页面上定义两个按钮，一个是登录按钮，一个是登出按钮
- 定义一个登录控制组件，根据登录态展示不同的按钮
- 同时也渲染上边的欢迎词提示
function LoginButton(props) {
return <button onClick={props.onClick}> Login </button>
}
function LogoutButton(props) {
return <button onClick={props.onClick}> Logout </button>
}
如上定义了两个按钮，根据props对象定义了按钮的点击事件。
下面在定义一个LoginControl组件，会根据状态渲染不同的按钮，在这个组件内部，我们就可以看到定义了button变量，该变量的值就是直接用React元素进行赋值。
class LoginControl extends React.Component{
constructor(props) {
super(props);
this.handleLogin = this.handleLogin.bind(this);
this.handleLogout = this.handleLogout.bind(this);
this.state ={isLoggedIn: true};
}
handleLogin() {
this.setState({isLoggedIn: true});
}
handleLogout() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogout} />
} else {
button = <LoginButton onClick={this.handleLogin} />
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />, document.getElementById('root')
);
除了声明变量，使用if条件表达式来判断，还可以使用逻辑与运算符。
*** 与运算符&&
我们知道React中的JSX支持任何表达式，这当然也包括逻辑运算表达式。这样也可以方便的渲染一个元素。如下：
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('root')
);
注意MailBox返回元素的时候，使用了JSX语法，大括号{}中的表达式，左侧是条件表达式，返回值为true或者false。&& 右侧是需要渲染的元素。
之所以能这样做，是因为在JavaScript中，true && expression总是返回expression，而false && expression总是返回false；因此，如果条件表达式返回值是true，&&右侧的元素就会被渲染，如果条件表达式返回的值是false，&&右侧的元素不会被渲染，React会跳过并忽略它。
三目运算符
条件渲染的另一种方式，是使用三目运算符：condition ? element1 : element2
如下边的代码：
render() {
const isLoggedIn = this.state.isLoggedIn;
return <h1> The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
}
阻止组件渲染
如果在某些情况下，需要隐藏某些组件，即使这些组件被其他组件渲染。那么就可以让该组件的render方法返回null即可。
如下边的代码，根据属性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(preState => ({
showWarning: !preState.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('root')
);
需要注意的是，组件的render方法返回null，并不会影响组件的生命周期方法的回调。例如componentWillUpdate和componentDidUpdate依然可以被调用。
