React 条件渲染
React 条件渲染
在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后,依据应用的不同状态,你可以只渲染对应状态下的部分。
React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
观察这两个组件:
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 的值来渲染不同的问候语。
React 元素变量
你可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分,而其他的渲染部分并不会因此而改变。
观察这两个组件,它们分别代表了注销和按钮:
function LoginButton(props) { return ( <button onClick={props.onClick}> Login </button> ); } function utButton(props) { return ( <button onClick={props.onClick}> ut </button> ); }
在下面的示例中,我们将创建名叫 LoginControl 的有状态的组件。
它将根据当前的状态来渲染 <LoginButton /> 或者 <utButton />。同时它还会渲染上示例中的 <Greeting />。
class LoginControl extends React.Component { constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleutClick = this.handleutClick.bind(this); this.state = {isLoggedIn: false}; } handleLoginClick() { this.setState({isLoggedIn: true}); } handleutClick() { this.setState({isLoggedIn: false}); } render() { const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) { button = <utButton onClick={this.handleutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); } } ReactDOM.render( <LoginControl />, document.getElementById('root') );
声明变量并使用 if 语句进行条件渲染是不错的方式,但有时你可能会想使用更为简洁的语法。接下来,我们将介绍几种在 JSX 中内联条件渲染的。
与运算符 &&
通过花括号包裹,你可以在 JSX 中嵌入任何表达式。这也 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染。
function Mail@R_337_2@(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( <Mail@R_337_2@ unreadMessages={messages} />, document.getElementById('root') );
之所以能这样做,是因为在 JavaScript 中,true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。
因此,如果条件是 true,&& 右侧的元素就会被渲染,如果是 false,React 会忽略并跳过它。
三目运算符
另一种内联条件渲染的是使用 JavaScript 中的三目运算符 。
在下面这个示例中,我们用它来条件渲染一小段文本
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 ? ( <utButton onClick={this.handleutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )} </div> ); }
就像在 JavaScript 中一样,你可以根据团队的习惯来选择可读性更高的风格。需要注意的是,如果条件变得过于复杂,那你应该考虑如何组件。
阻止组件渲染
在极少数情况下,你可能希望能隐藏组件,即使它已经被其他组件渲染。若要完成此操作,你可以让 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('root') );
在组件的 render 中返回 null 并不会影响组件的生命周期。例如,上面这个示例中,componentDidUpdate 依然会被。