React中文文档之Conditional Rendering

Conditional Rendering - 有条件的渲染
在React中，你可以创建唯一的组件，来封装你需要的行为。之后，你可以仅仅渲染它们中的一些，这取决于你应用的状态。
React中的有条件的渲染，同JS中有条件的渲染的工作方式相同。使用JS操作符，例如：if 或者 'conditional operator-三元运算符' 来创建代表当前状态的元素，然后让React更新对应的UI。
考虑这2个组件：

		function UserGreeting(props) {
		  	return <h1>Welcome back!</h1>;
		}
		function GuestGreeting(props) {
		  	return <h1>Please sign up.</h1>;
		}

我们将创建一个 'Greeting' 组件来展示这些组件中的一个，取决于用户是否登录：

		function Greeting(props) {
			const isLoggedIn = props.isLoggedIn;
			if (isLoggedIn) {
				return <userGreeting>;
			} 
			return <GuestGreeting>;
		}
		ReactDOM.render(


			// Try changing to isLoggedIn={true}:
			<Greeting isLoggedIn={false} />,
			document.getElementById('root')
		);

这个例子根据 'isLoggedIn' 的值，渲染了一个不同的greeting


元素变量
你可以使用变量来存储元素。这能帮助你有条件地渲染组件的一部分，而其余的输出不会改变。
考虑这两个组件，分别代表 '登录' 和 '退出登录' 按钮：

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

在下面的例子中，我们将创建一个有状态组件(stateful component)，称为 'LoginControl'：

		class LoginControl extends React.Component {
			constructor(props) {
				super(props);	
				this.handleLoginClick = this.hanleLoginClick.bind(this);
				this.handleLogoutClick = this.hanleLogoutClick.bind(this);
				this.state = {isLoggedIn: true};
			}	
			handleLoginClick() {
				this.setState({isLoggedIn: true});
			}
			handleLogoutClick() {
				this.setState({isLoggedIn: false});
			}
			render() {
				const isLoggedIn = this.state.isLoggedIn;
				let button = null;
				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('root');
		);

当声明一个变量，同时使用一个 'if' 语句，是有条件地渲染组件的一种很好的方式，有时，你可能想使用一个更短的语法。有几种方式内联在JSX，解释如下。


内联if，使用逻辑 '&&' 操作符
可以嵌入封装在 '{}' 内的表达式到 JSX。包括js的逻辑 '&&' 操作符。这对于有条件的引入一个元素很方便：

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

它之所以起作用，是因为：在JS中，true && 表达式，总是计算表达式的值；false && 表达式，总是返回false。(逻辑运算符的 '开关问题')
因此，如果条件为true，'&&' 右侧的元素将会出现在输出中。如果条件为false，React将会忽略 '&&' 右侧的元素，并跳过它。


内联if-else，使用三元运算符(conditional operator)
另一个有条件地渲染元素的方式是，使用js的三元运算符：condition ? true : false.
在下面的例子中，我们使用它来有条件地渲染一小块文本：

		render() {
			const isLoggedIn = this.state.isLoggedIn;
			return (
				<div>
					The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
				</div>
			);
		}

它也可以被用于更大的表达式，虽然这是不太明显的：

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

就像在js中，这取决于你来选择一个合适的风格，基于你和你的团队考虑更多的可读性。也请谨记，不论什么时候，当条件变得太复杂，这可能是提取组件的一个好的时机。


阻止组件的渲染
在极少的情况下，你可能想要组件隐藏自身，甚至它被通过另外一个组件渲染。为了实现这点，将它的渲染输出，替换为 'null'。
在下面的例子中， <WarningBanner />被渲染，取决于一个被称作是 '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(prevState => ({}i
					showWarning: !prevState.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');
		);