详解React 的几种条件渲染以及选择
对于一个展示页面来讲, 通常有好几种展示状态(以列表页为例):
- 数据为空, 空页面
- 取数据时发生错误, 错误页面
- 数据正常
- 加载状态
针对以上三种情况, react渲染列表的时候要正确判断并渲染出相应的视图, 也就是条件渲染. 不同于vue的v-if, v-show等框架提供的api, react的条件渲染都是js原生的再加上一点点的hack. 比如react文档提到的. if/else, && 和三目等等.
当然上面的都是常用的一些方法, 但是也存在着各种问题, 比如条件分支过多的的事时候代码也会越来越乱. 下面提供几种具有普适性的方法
if/else, 三目以及 短路运算符
这三个方法都是官方文档提到的, 这里就放到一起了, 其实这三种方案都是类似的: 在render生命周期里做相应的判断. 不过三目和短路运算符可以在jsx行内使用.
if/else
class List extends Component {
static propTypes = {
status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
}
render () {
const { status } = this.props
if (status === 'loading') {
return <div>
加载状态
</div>
}
if (status === 'error') {
return <div>
错误状态
</div>
}
if (status === 'success') {
return <div>
成功状态
</div>
}
if (status === 'empty') {
return <div>
空状态
</div>
}
}
}
可以看到这种写法胜在清楚明了, 但是如果判断分支越来越多代码无可避免的会非常冗余, 同时复用性也堪忧.
Render(IF)组件
这里的render当然不是生命周期里的render, 我们可以跟vue里的v-if对应起来
function Render ({ if: cond, children }) {
return cond ? children : null
}
上面是简单的Render组件, 使用起来是这样的
class List extends Component {
static propTypes = {
status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
}
render () {
const { status } = this.props
return (
<div>
<Render if={status === 'loading'} >
加载状态
</Render>
<Render if={status === 'error'} >
错误状态
</Render>
<Render if={status === 'success'} >
成功状态
</Render>
<Render if={status === 'empty'} >
空状态
</Render>
</div>
)
}
}
相比使用在render里使用大量的if/else 上面的写法无疑更加清楚明了了. 如果所有列表业务组件统一起来, 状态保持一致, 我们可以做更高层次的抽象, 把其他状态都抽象到一个高阶函数之中, 我们写代码的时候只要确保success的状态能正确渲染即可
立即执行函数
jsx里是可以写变量, 同时立即执行函数也是可以的
class List extends Component {
static propTypes = {
status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
}
render () {
const { status } = this.props
return (
<div>
{(() => {
switch (status) {
case 'loading':
return <div>加载状态</div>
case 'error':
return <div>错误状态</div>
case 'success':
return <div>成功状态</div>
case 'empty':
return <div>空状态</div>
}
})()}
</div>
)
}
}
立即函数的复用显然不太现实, 所以立即函数的适用场景是那种相对比较复杂但无法复用的组件
高阶组件
对于高阶组件的概念就不做赘述了, 我们把条件渲染的逻辑放到高阶组件中, 除了逻辑的抽象外, 也可以提高组件的复用率.
const withList = WrappedComponent => {
return class PP extends Component {
render() {
const { status } = this.props
switch (status) {
case 'loading':
return <div>加载状态</div>
case 'error':
return <div>错误状态</div>
case 'success':
return <WrappedComponent {...this.props}/>
case 'empty':
return <div>空状态</div>
}
}
}
}
如果我们可以保证所有列表的props一致(也就是都使用status判断状态), 我们完全可以专注的写status为success的状态:
@withList
class List extends Component {
static propTypes = {
status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
}
render () {
return (
<div>
成功页面
</div>
)
}
}
其次我们可以把加载, 错误, 以及空状态统一抽成组件, 对于提高组件的复用率无疑可以起很大作用.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在react-antd中弹出层form内容传递给父组件的操作
这篇文章主要介绍了在react-antd中弹出层form内容传递给父组件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
错误边界是一种React组件,这种组件可以捕获发生在其子组件树任何位置的JavaScript错误,并打印这些错误,同时展示降级UI,而并不会渲染那些发生崩溃的子组件树2023-01-01
这篇文章主要给大家介绍一下如何用 react 实现一个简单的 scrollView组件，文中有详细的代码示例，具有一定的参考价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了详解React中共享组件逻辑的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要为大家介绍了React路由拦截模式及withRouter示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
许多朋友遇到React Native 无法链接模拟器的问题，怎么解决呢，本文给大家分享完整简便解决方法及配置例题，对React Native 链接模拟器相关知识感兴趣的朋友一起看看吧2021-06-06
很多小伙伴反馈React ant 点击导航条闪烁,没有传递具体的参数给点击事件 , 导致在函数内部无法准确判断要展示哪个子菜单,可能导致页面状态的短暂变化,出现闪烁效果,下面给大家分享解决方法,感兴趣的的朋友跟随小编一起看看吧2024-04-04
这篇文章主要介绍了react-router 路由切换动画的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了React+Spring实现跨域问题的完美解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了React自定义视频全屏按钮实现全屏功能，通过绘制全屏按钮，并绑定点击事件，编写点击事件，通过实例代码给大家详细讲解,需要的朋友可以参考下2022-11-11
最新评论