React条件渲染如何使用

这篇文章主要介绍“React条件渲染如何使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“React条件渲染如何使用”文章能帮助大家解决问题。

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

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条件渲染如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。