React学习笔记之条件渲染(一)
2017-07-02 09:51
871 查看
前言
在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') );
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- vue学习笔记1——v-if和templete 条件渲染 使用 key 控制元素的可重用
- React学习笔记之列表渲染示例详解
- React学习之条件视图渲染(六)
- react 官网笔记 03 事件处理和条件渲染
- vue学习笔记---class与style绑定以及条件渲染
- JavaScript学习笔记--第二章.条件语句与交互事件(链接事件、图片交互)
- 31天重构学习笔记31. 使用多态代替条件判断
- SHELL学习笔记----IF条件判断,判断条件
- StringTemplate.Net 学习笔记(5):条件声明
- 31天重构学习笔记16. 封装条件
- C#.NET学习笔记---C#中的条件编译
- 31 天重构学习笔记18. 使用条件判断代替异常
- Shell 编程学习笔记:条件测试
- SEO学习笔记:搜索引擎对作弊的判断条件
- PL/SQL学习笔记-条件控制
- 开源3D图形渲染引擎OGRE学习笔记
- 【原创】斌伯的DirectX学习笔记(3)--DirectX的图形渲染
- 31天重构学习笔记18. 使用条件判断代替异常
- 090811c语言学习第五章笔记(类型变换,自定义函数,循环条件等)
- SHELL学习笔记----IF条件判断,判断条件