React条件渲染实例讲解使用

 更新时间:2022年11月01日 16:54:37   作者:-耿瑞-  
在React中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和JavaScript中的一致,使用JavaScript操作符if或条件运算符来创建表示当前状态的元素,然后让React根据它们来更新UI

我们先创建一个用于演示条件渲染的组件

import './App.css';
import React from "react";
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      signIn: false
    }
  }
  increase(){
    this.setState({
      signIn: !this.state.signIn
    })
  }
  render(){
    let ligin = this.state.signIn?<span>已登录</span>:<span>未登录</span>
    return (
      <div className="App">
        { ligin }
        <button onClick = { this.increase.bind(this) }>{ this.state.signIn?"取消登录":"登录" }</button>
      </div>
    )
  }
}
export default App;

这里我们模拟了一个登录和未登录的情况

首先 我们在state中定义了一个signIn 这是个布尔类型的变量 比喻成 他为true 表示用户已登录 为false 表示用户还没有登录

然后 我们在render函数中定义了一个ligin变量 他用了三元运算符 这里是在判断 this.state.signIn是不是true

如果为true 则为已登录 否则 是未登录

然后 这个ligin就接受到了结果 然后我们将他插入在我们的页面元素中

运行的效果就是这样

然后我们点一下按钮

因为按钮的点击事件会改变signIn 他的条件改变了 渲染的元素就 不一样了

然后我们的条件判断也可以直接写在页面里

我们在state中再加一个list值

constructor(props){
super(props);
  this.state = {
    signIn: false,
    list: []
  }
}

我们加了一个list变量 他的值是一个空数组

然后我们在render中循环遍历这个list

render(){
  let ligin = this.state.signIn?<span>已登录</span>:<span>未登录</span>
  return (
    <div className="App">
      { ligin }
      <div>
        {
          this.state.list.map((item,index) =>{
            return <p key = {index}>{ item }</p>
          })
        }
      </div>
      <button onClick = { this.increase.bind(this) }>{ this.state.signIn?"取消登录":"登录" }</button>
    </div>
  )
}

但大家或许会发现 我们的数组是没有值的啊

用户一看 你这什么都没有 是不是出问题啦?

这是我们就可以判断 如果数组是空的 给用户一个提示

render(){
 let ligin = this.state.signIn?<span>已登录</span>:<span>未登录</span>
 return (
   <div className="App">
     { ligin }
     {
       this.state.list.length > 0?
       <div>
         {
           this.state.list.map((item,index) =>{
             return <p key = {index}>{ item }</p>
           })
         }
       </div>
       :
       <div>暂无数据....</div>
     }
     <button onClick = { this.increase.bind(this) }>{ this.state.signIn?"取消登录":"登录" }</button>
   </div>
 )
}

我们这里判断this.state.list的长度大于0 我们就循环渲染 如果是0 那就展示提示 暂无数据…

我们代码运行结果如下

到此这篇关于React条件渲染的文章就介绍到这了,更多相关React条件渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 深入探讨前端框架react

    深入探讨前端框架react

    本文带领大家一起探讨前端框架react,涉及到前端框架react相关知识,对前端框架react相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • 详解React之key的使用和实践

    详解React之key的使用和实践

    这篇文章主要介绍了详解React之key的使用和实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React教程之封装一个Portal可复用组件的方法

    React教程之封装一个Portal可复用组件的方法

    react的核心之一是组件,下面这篇文章主要给大家介绍了关于React教程之封装一个Portal可复用组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2018-01-01
  • react中fetch之cors跨域请求的实现方法

    react中fetch之cors跨域请求的实现方法

    本篇文章主要介绍了react中fetch之cors跨域请求的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • React中的函数式插槽详解

    React中的函数式插槽详解

    这篇文章主要为大家详细介绍了React 开发中遇到的具名插槽的函数用法,文中的示例代码讲解详细,具有一定的学习价值,有兴趣的小伙伴可以了解一下
    2023-11-11
  • react中的forwardRef 和memo的区别解析

    react中的forwardRef 和memo的区别解析

    forwardRef和memo是React中用于性能优化和组件复用的两个高阶函数,本文给大家介绍react中的forwardRef 和memo的区别及适用场景,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • React Native性能优化红宝书方案详解

    React Native性能优化红宝书方案详解

    React Native 是Facebook在React.js Conf2015推出的开源框架,使用React和应用平台的原生功能来构建Android和iOS应用,这篇文章主要介绍了React Native性能优化红宝书,需要的朋友可以参考下
    2024-06-06
  • React SSR 中的限流案例详解

    React SSR 中的限流案例详解

    这篇文章主要介绍了React SSR 之限流,React SSR 毕竟涉及到了服务端,有很多服务端特有的问题需要考虑,而限流就是其中之一,本文会通过一个简单的案例来说明,为什么服务端需要进行限流,需要的朋友可以参考下
    2022-07-07
  • React Class组件生命周期及执行顺序

    React Class组件生命周期及执行顺序

    这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序,本文给大家介绍的非常详细,需要的朋友可以参考下
    2021-08-08
  • 聊聊React onClick 传递参数的问题

    聊聊React onClick 传递参数的问题

    很多朋友向小编反映一个问题关于React onClick 传递参数的问题,当点击删除按钮需要执行删除操作,针对这个问题该如何处理呢?下面小编给大家带来了React onClick 传递参数的问题,感兴趣的朋友一起看看吧
    2021-10-10

最新评论