17==》 条件渲染
state初始化一般写在构造器当中 CharShop.js如下 import React, { Component } from "react";
export default class CharShop extends Component {
// state初始化一般写在构造器当中
constructor(props){
super(props);
this.state={
goods: [{ id: 1, text: "web111" }, { id: 2, text: "web222" },{ id: 3, text: "web333" }]
}
} render(){
// 获取state中的内容
let con = this.state.goods[0].text ? <h1>{this.state.goods[0].text}</h1>:null //条件渲染 return(
<div>
{con}
</div>
)
} }

React中条件渲染的更多相关文章

  1. &&运算符,三木运算符与React的条件渲染

    在使用react框架的时候中往往会遇到需要条件渲染的情形,这时候,许多人会设想采用if语句来实现,比如下面,当满足条件condition时,conditonRender渲染组件ComponentA,当 ...

  2. 关于vue.js中条件渲染的练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  3. React 组件条件渲染的几种方式

    一.条件表达式渲染 (适用于两个组件二选一的渲染) render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> ...

  4. React中循环渲染类似Vue中 的v-for

    17==>循环数组 类似v-for import React, { Component } from "react"; export default class CharSh ...

  5. 【译】在React中实现条件渲染的7种方法

    原文地址:https://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications 借助R ...

  6. react初探(一)之JSX、状态(state)管理、条件渲染、事件处理

    前言: 最近收到组长通知我们项目组后面新开的项目准备统一技术栈为react,目前我的情况是三大框架只会angular和Vue.在实际项目中只使用过一次angular5,其余项目都是使用Vue写的.写篇 ...

  7. react 入坑笔记(五) - 条件渲染和列表渲染

    条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...

  8. React文档(八)条件渲染

    在React中,你可以创建不同的组件各自封装你需要的东西.之后你可以只渲染其中的一部分,这取决于应用的state(状态). 条件渲染在React里就和js里的条件语句一样.使用js里的if或者条件表达 ...

  9. 2017.11.7 ant design - upload 组件的使用, react 条件渲染以及 axios.all() 的使用

    一.主要任务:悉尼小程序管理后台,添加景点页面的开发 二.所遇问题及解决 1. 上传多个不同分类音频信息时,如中文音频和英文音频,要求音频不是放在一个数组中的,每个音频是一个独立的字段,此时: < ...

随机推荐

  1. Linux下使用docker 拉取 vsftpd 镜像搭建 Ftp 服务器,连接 Ftp 时遇到的错误(425 Failed to establish connection)

    Ftp踩坑系列: Linux上的ftp服务器 vsftpd 之配置满天飞--设置匿名用户访问(不弹出用户名密码框)以及其他用户可正常上传 ftp服务器Serv-U 设置允许自动创建不存在的目录 FTP ...

  2. Python 和 JS 有什么相似?

    Python 是一门运用很广泛的语言,自动化脚本.爬虫,甚至在深度学习领域也都有 Python 的身影.作为一名前端开发者,也了解 ES6 中的很多特性借鉴自 Python (比如默认参数.解构赋值. ...

  3. How to: Generate XPO Business Classes for Existing Data Tables 如何:为现有数据表生成 XPO 业务类

    From the Tutorial and other documentation sources, you learned how to create business classes for yo ...

  4. js-06-字符串

    一.查找字符串的字符串 a:indexOf:没有查询到返回值为-1: b:lastIndexoOf:查找到的为重复的最后一个: c:search 查找: var str="good good ...

  5. Viewpager+Fragment 跳转Activity报错android.os.TransactionTooLargeException: data parcel size xxxxx bytes

    Viewpager + Fragment 跳转Activity报错android.os.TransactionTooLargeException: data parcel size xxxxx byt ...

  6. MySQL数据库~~~~pymysql 连接 MySQL的客户端

    import pymysql conn = pymysql.connect( host = '127.0.0.1', # 主机 port = 3306, # 端口号 user = 'root', # ...

  7. android 启动流程 相关2 init进程 属性服务

    Init属性服务 系统属性服务 属性梳理 来源和读取时机 来源:内核参数 ro.kernel.*   代表有qemu内核参数才会设置(在虚拟机中) ro.boot.*     1.内核设备树相关的设备 ...

  8. GUI程序分析实例

    GUI程序开发概述 GUI程序开发原理 GetMessage(&msg)将消息队列中的消息取出来,在循环中进行处理. GUI程序开发的本质

  9. 图片转换成base64

    let bgcImage = 'http://192.168.0.83:9080/files/4a9c3056-9b9b-4b41-b8e2-fd9f27023c41.jpg' let image = ...

  10. 获取IP的三种方法

    第一种 取本主机ip地址 public string GetLocalIp() { ///获取本地的IP地址 string AddressIP = string.Empty; foreach (IPA ...