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. Docker系列之原理简单介绍

    目录 1.1.Docker架构简介 1.2.Docker 两个主要部件 1.3.虚拟机和Docker对比: 1.4.Docker内部结构 Docker系列之原理简单介绍 @ Docker是一个开源的应 ...

  2. java的各种日志框架

    本文是作者原创,版权归作者所有.若要转载,请注明出处.文章中若有错误和疏漏之处,还请各位大佬不吝指出,谢谢大家. java日志框架有很多,这篇文章我们来整理一下各大主流的日志框架, 包括log4j  ...

  3. linux,发布.netcore填坑,自动升级core版本后,运行报错:'Microsoft.AspNetCore.App', version '3.0.0' was not found.

    近来有点空,所以研究下,netcore这个神器~    号称跨平台的利器,从此net不在局限于windows服务器了,早点该多好呀,这样我们net程序员,不香吗? 网上搜,‘netcore 发布liu ...

  4. Linux(一)

    1.简单命令        1.1 ls指令         语法1:#ls  [路径]               表示列出指定路径下的文件夹和文件的名字,如果路径没有指定则列出当前路径下的(lis ...

  5. Python-xlwt库的基本使用

    安装xlwt库 pip install xlwt 基本使用 ①创建工作簿 wa = xlwt.Workbook() ②添加工作表 添加“class”工作表 b = wa.add_sheet('clas ...

  6. JavaWeb学习——web.xml文件说明

    JavaWeb学习——web.xml文件说明 摘要:本文主要学习了web.xml文件的作用以及如果配置. 是什么 web.xml文件是用来在JavaWeb项目里面初始化配置信息的,比如:访问的首页.S ...

  7. Python 标准类库-数字和数学模块之decimal使用简介

    标准类库-数字和数学模块之decimal使用简介 by:授客 QQ:1033553122 例子 >>>from decimal import * >>>getcon ...

  8. Android数据库GreenDao的使用总结

    一.GreenDao的介绍 GreenDAO是一个开源的Android ORM(“对象/关系映射”),通过ORM(称为“对象/关系映射”),节省了我们在数据库开发过程的时间! 通过GreenDao,我 ...

  9. MAC下安装pomelo

    配置:OS X 10.9.4 + Xcode 6.0 摘要:本文目标为成功运行pomelo的HelloWorld程序.   壹.| 安装必要项   一.安装Xcode及相关工具 1.安装Xcode. ...

  10. Python的filter方法实现筛选功能

    filter方法可以实现筛选,第一个参数是一个函数,返回值是True或者False,第二个参数可以是str.tuple.list,将后面的参数依次传递给函数,依次判断结果,留下结果为 True的.比如 ...