React 的几种条件渲染以及选择详解

最新推荐文章于 2024-08-09 10:24:20 发布

霜如明月

最新推荐文章于 2024-08-09 10:24:20 发布

阅读量704

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/q3254421/article/details/85268993

版权

本文详细介绍了React中处理条件渲染的多种方法，包括if/else、三目运算符、短路运算符、Render(IF)组件、立即执行函数以及高阶组件。针对不同状态，如数据为空、加载中、数据正常和错误页面，提供了清晰的解决方案，并讨论了如何通过高阶组件提高代码复用性和可维护性。

摘要由CSDN通过智能技术生成

对于一个展示页面来讲, 通常有好几种展示状态(以列表页为例):

数据为空, 空页面
取数据时发生错误, 错误页面
数据正常
加载状态

针对以上三种情况, 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') {