React学习笔记之条件渲染（一）

2019-11-19 16:12:35

字体：大中小

来源：转载

供稿：网友

前言

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

条件渲染

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

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'));

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

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 = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); }}ReactDOM.render(  <LoginControl />, document.getElementById('root'));

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

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'));

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> );}

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

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 => ({ 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'));

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对武林网的支持。

上一篇：React学习笔记之事件处理（二）

下一篇：vue.js学习之vue-cli定制脚手架详解