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. Mysql字符串截取_获取指定字符串中的数据

    前言:本人遇到一个需求,需要在MySql的字段中截取一段字符串中的特定字符,类似于正则表达式的截取,苦于没有合适的方法,百度之后终于找到一个合适的方法:substring_index('www.sql ...

  2. Selenium环境要配置浏览器驱动

    1.浏览器环境变量添加到path 2.将浏览器相应的驱动.exe复制到浏览器目录 3.这条就是让我傻逼似的配置一上午的罪魁祸首:将驱动.exe复制到python目录!!!! Selenium

  3. Java时区问题

    Java时区相关 时间格式 UTC是以原子时计时,更加精准,适应现代社会的精确计时.不过一般使用不需要精确到秒时,视为等同.GMT是前世界标准时,UTC是现世界标准时.每年格林尼治天文台会发调时信息, ...

  4. C lang: The caracter reverse

    Ax_Code #include<stdio.h> int main(void) { int i; char string[7] = {"mrsoft"}; char ...

  5. Unable to connect to the server: x509: certificate signed by unknown authority

    0x00 Problem 在使用二进制搭建 k8s 集群的过程中,使用 kubectl get 等操作时始终显示 x509: certificate signed by unknown authori ...

  6. Angular框架入门

    今天简单学习了AngularJS框架,在这里我想简单的总结一下我所了解的AngularJS和一些入门案例! 首先,我们要知道什么是AngularJS? AngularJS  诞生于2009年,由Mis ...

  7. XTTS Creates Alias on Destination when Source and Destination use ASM (Doc ID 2351123.1)

    XTTS Creates Alias on Destination when Source and Destination use ASM (Doc ID 2351123.1) APPLIES TO: ...

  8. 发布Cocos2d-x的PC端程序

    发布Cocos2d-x的PC端程序 一.创建一个Release的项目 1.利用根目录下的解决方案生成Release.win32文件夹 2.新建一个cocos2d项目(比如解决方案名称MySolutio ...

  9. Cocos2d-x.3.0开发环境搭建

    配置:win7 + VS2012 + Cocos2d-x.3.0 + Cocos Studio v1.4.0.1 前言:本文介绍在上述配置下进行游戏开发的环境搭建.开发语言为C++.如果读者不需要查看 ...

  10. Objective-C中 #include 和 #import 的区别

    由于 Objective-C 兼容 C 语言,所以导入文件时, 可以使用 #include,也可以使用 #import (Objective-C 新增的) 如: #include <stdio. ...