import React from 'react'
import img from '../public/img/001.jpg' // 此时img是一个变量,在下面直接使用该变量即可引入该图片
class New extends React.Component{
constructor(props) {
super(props)
this.state = {
msg: '直接定义的数据',
list1: [<h1>1111</h1>,<h1>22222</h1>,<h1>3333</h1>],
list2: [1,2,3,4,5]
}
}
render() {
let newList1 = this.state.list1.map(function (value, key) {
return (<li key = {key}>{value}</li>)
}); // 使用map方法将list1数组修改后渲染
return <div>
{ this.state.msg }
<img src={ img } title="引入图片的两种方式"/>
<img src={require('../public/img/001.jpg')} alt=""/> // 通过require的方式可以获取图片
<ul>
{newList1}
</ul>
<ul>
{
this.state.list1.map(function (value,key) {
return (<li key={key}>{value}</li>) // 使用map方法将list1数组修改后渲染
 }) } </ul> </div>  } } export default New

react中循环节点的方式以及图片引用的方式的更多相关文章

  1. vue、react中循环遍历为什么会有key,key有什么作用?

    先讲一下,vue和react都是在操作虚拟dom,并且根据diff算法进行新旧dom对比,从而更新dom,以vue举例: vue官方文档中写到有 key 的特殊属性主要用在 Vue 的虚拟 DOM 算 ...

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

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

  3. React中使用 react-router-dom 路由传参的三种方式详解【含V5.x、V6.x】!!!

    路由传值的三种方式(v5.x) params参数 //路由链接(携带参数): <Link to='/demo/test/tom/18'}>详情</Link> //或 <L ...

  4. 复习下C 链表操作(单向循环链表、查找循环节点)

    循环链表 稍复杂点. 肯能会有0 或 6 字型的单向循环链表.  接下来创建 单向循环链表 并 查找单向循环链表中的循环节点. 这里已6字型单向循环链表为例. //创建 循环链表 Student * ...

  5. react之本地图片引用

    react之本地图片引用 <img src="../images/photo.png"/> 这种写法在react中是不支持的,所以引用本地图片需要用import或者re ...

  6. 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】

    ## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...

  7. React中父子组件数据传递

    Vue.js中父子组件数据传递:Props Down ,  Events Up Angular中父子组件数据传递:Props Down,  Events  Up React中父子组件数据传递:Prop ...

  8. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

  9. react中的ref的3种方式

    2020-03-31 react中的ref的3种方式 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获 ...

随机推荐

  1. lodash (js实用工具库)

    是什么? 它提供了一整套函数式编程的实用功能, 并且支持模块化, 比underscore更优秀. 文档? http://lodashjs.com/docs/ 引用? <script src=&q ...

  2. Linux C语言 网络编程(二) server模型

    前面介绍了关于连接linux服务端方式,可是服务端的资源是有限的,所以我们通常须要又一次思考,设计一套server模型来处理相应的client的请求. 第一种:并发server.通过主进程统一处理cl ...

  3. Linux搭建FTP服务器实战

    首先准备一台Linux系统机器(虚拟机也可), 检测出是否安装了vsftpd软件: rpm -qa |grep vsftpd 如果没有输出结果,就是没有安装. 使用命令安装,安装过程中会有提示,直接输 ...

  4. Java反射详解(转)

    原文地址:http://www.importnew.com/17616.html 动态语言 动态语言,是指程序在运行时可以改变其结构:新的函数可以被引进,已有的函数可以被删除等在结构上的变化.比如众所 ...

  5. 转换(旋转)transform

    div { transform:rotate(180deg); -ms-transform:rotate(180deg); /* IE 9 */ -moz-transform:rotate(180de ...

  6. UVA - 11464 Even Parity 【暴力枚举】

    题意 给出一个 01 二维方阵 可以将里面的 0 改成1 但是 不能够 将 1 改成 0 然后这个方阵 会对应另外一个 方阵 另外一个方阵当中的元素 为 上 下 左 右 四个元素(如果存在)的和 要求 ...

  7. java图形界面设计

    1.       基本的java Frame操作. Java的图形界面的类主要包括AWT和Swing.在AWT中图形元素的父类为Component. 继承关系如下:Component->Cont ...

  8. Hive- Hive Web Interface

    当我们安装好hive时候,我们启动hive的UI界面的时候,命令: hive –-service hwi ,报错,没有war包 我们查看hive/conf/hive-default.xml.templ ...

  9. java中相对路径加载xml

    一.xml文件一般的存放位置有三个: 1.放在WEB-INF下: 2.xml文件放在/WEB-INF/classes目录下或classpath的jar包中: 3.放在与解析它的java类同一个包中,不 ...

  10. Python: scikit-image canny 边缘检测

    这个用例说明canny 边缘检测的用法 import numpy as np import matplotlib.pyplot as plt from scipy import ndimage as ...