React官方文档--Conditional Rendering
来源:互联网 发布:网络平台合作合同范本 编辑:程序博客网 时间:2024/05/21 18:33
Conditional Rendering
在React中,你可以创建不同的组件,并且渲染其中的一部分,这取决于你应用的状态。
状态渲染和JavaScript中的分支运算符有一样的效果,使用JavaScript中的类似if运算符来创建元素来代表当前状态,然后让React更新UI去匹配。
我们创建了一个Greeting组件去显示,显示的结果取决于用户是否登录。
//two componentsfunction UserGreeting(props) { return <h1>Welcome back!</h1>}function GuestGreeting(props) { return <h1>Please sign up.</h1>}//根据状态随时切换运算符function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } else { return <GuestGreeting />; }}
元素变量
可以使用变量来存储元素,可以帮助你在保证其他部分的输出不变的情况下,选择性的渲染一部分组件。考虑到这两个新的组件代表了登入登出按钮。
function LoginButton(props) { return ( <button onClick={props.onClick}> Login </button> );}function LogoutButton(props) { return ( <button onClick={props.onClick}> Logout </button> );}//create a stateful componentclass 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条件语句来进行渲染 if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} /> } else { button = <LoginButton onClick={this.handleLoginClick} /> } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); }}
使用&&运算符实现行内逻辑
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'));
还可以如上面所示,将JSX包裹在花括号里面,来处理条件表达式,根据JavaScript的语法:true && expression
的值永远都是expression
,而false && expression
的值一直都是false
。所以,如果条件表达式的结果为true
,那么就会直接返回后面的值,如果结果为false
则React会忽略并且跳过后面的表达式。
行内if-else条件运算符
另外一种实现行内渲染元素中的JavaScript条件表达式的是三目运算符condition ? true : false
,下面的代码中使用了三目运算符。
render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> The user is <b> {isLoggedIn ? 'currently' : 'not'}</b> logged in. </div> );}
就像JavaScript中一样,如何使用行内表达式来进行条件跳转取决于你的团队觉得哪种代码方式更加可读。
阻止组件渲染
在小部分情况下,你可能需要让一个元素隐藏。可以让render
返回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(preState => ({ showWarning: !preState.showWarning })); } render() { return ( <div> <WarningBanner warn={this.state.showWarning}> </WarningBanner> <button onClick={this.handleToggleClick}> {this.state.showWarning ? 'Hide' : 'Show'} </button> </div> ); }}ReactDOM.render( <Page />, document.getElementById('root'));
0 0
- React官方文档--Conditional Rendering
- Reactjs入门官方文档(六)【conditional-rendering】
- React官方文档--Rendering Elements
- react native 官方文档
- React官方文档--Forms
- Reactjs入门官方文档(二)【rendering-elements】
- React Native 官方文档中文版
- React官方文档--Introducing JSX
- React官方文档--Handling Events
- Umbraco 官方技术文档 翻译 九、 Rendering content 呈现内容
- react native 性能优化基础 - 官方文档
- React官方文档--State and Lifecycle
- React官方文档--Lists and Keys
- React官方文档--Lifting State Up
- React官方文档--Composition vs Inheritance
- React.js 官方文档摘记:表单
- Think in React(官方文档)翻译
- React Native 官方文档中文版(含最新Android内容)
- React官方文档--Handling Events
- 数组类型转换器实例
- WebView之js调用Android类的方法传递数据
- 串口读取与串口设备编程搜集内容总结
- 跨平台PHP调试器设计及使用方法——使用
- React官方文档--Conditional Rendering
- Android Local语言设置
- 一步一步理解GB、GBDT、xgboost
- PDF时间戳数字签名
- clob字段使用,程序直接卡住,不报错也不返回值
- java调用webAPI(C#)的实例
- 用Python学习数据结构2--链表
- ubtunu 切换python的默认版本
- React官方文档--Lists and Keys