React条件渲染实例讲解使用

在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?已登录:未登录 return (  { ligin } 
 ) } } 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?已登录:未登录 return (  { ligin }  { this.state.list.map((item,index) =>{ return { item }
 }) } 
 ) }

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

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

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

render(){ let ligin = this.state.signIn?已登录:未登录 return (  { ligin } { this.state.list.length > 0?  { this.state.list.map((item,index) =>{ return { item }
 }) } 
 : 暂无数据....
 } 
 ) }

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

我们代码运行结果如下