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 那就展示提示 暂无数据… 上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
