1. import React from 'react'
  2. import img from '../public/img/001.jpg' // 此时img是一个变量,在下面直接使用该变量即可引入该图片
  3. class New extends React.Component{
  4. constructor(props) {
  5. super(props)
  6. this.state = {
  7. msg: '直接定义的数据',
  8. list1: [<h1>1111</h1>,<h1>22222</h1>,<h1>3333</h1>],
  9. list2: [1,2,3,4,5]
  10. }
  11. }
  12. render() {
  13. let newList1 = this.state.list1.map(function (value, key) {
  14. return (<li key = {key}>{value}</li>)
  15. }); // 使用map方法将list1数组修改后渲染
  16. return <div>
  17. { this.state.msg }
  18. <img src={ img } title="引入图片的两种方式"/>
  19. <img src={require('../public/img/001.jpg')} alt=""/> // 通过require的方式可以获取图片
  20. <ul>
  21. {newList1}
  22. </ul>
  23. <ul>
  24. {
  25. this.state.list1.map(function (value,key) {
  26. return (<li key={key}>{value}</li>) // 使用map方法将list1数组修改后渲染
  1. }) } </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. 【题解】Sumdiv

    [题解]Sumdiv 传送门 根据组合的乘法原理,一个数的所有约数和 \[ sum=\prod_{i=1} \Sigma_j^{a_i} p_i^j \] 所以任务就变成了分解\(A\)的质因数,分解 ...

  2. 在linux 中卸载Mysql

    一.通用的mysql卸载方式 1.查看系统中是否已经安装了mysql 命令:rpm -qa|grep -i mysql如果有显示msql的安装列表,代表已经安装了. 2.停止mysql服务.删除之前安 ...

  3. PAT 甲级 1104. Sum of Number Segments (20) 【数学】

    题目链接 https://www.patest.cn/contests/pat-a-practise/1104 思路 最容易想到的一个思路就是 遍历一下所有组合 加一遍 但 时间复杂度 太大 会超时 ...

  4. CentOs7 配置nfs 系统

    一.介绍 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,功能是让客户端通过网络访问不同主机上磁盘里的数据,主要用在类Unix系统上实现文件共享 ...

  5. "flash download failed - Target dll has been cancelled"错误解决办法

    在用mdk通过stlink烧写官方例程到stm32f429I discovery时,烧写了十来个程序都没问题,突然在烧写一个程序时, 弹出了“flash download failed - Targe ...

  6. python列表推导式的if-else

    a=[i for i in range(10) if i%2==0]print(a)a=[i if i%2==0 else 'qi' for i in range(10)]print(a) 结果:[0 ...

  7. BZOJ 1726 [Usaco2006 Nov]Roadblocks第二短路:双向spfa【次短路】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1726 题意: 给你一个无向图,求次短路. 题解: 两种方法. 方法一: 一遍spfa,在s ...

  8. (转)Linux内核本身和进程的区别 内核线程、用户进程、用户线程

    转自:http://blog.csdn.net/adudurant/article/details/23135661 这个概念是很多人都混淆的了,我也是,刚开始无法理解OS时,把Linux内核也当做一 ...

  9. css书写规则

    无规矩不成方圆,不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的 不要在自闭合(self-closing)元素的尾部添加斜线 不要省略可选的结束标签(closing tag)(例 ...

  10. win32com操作word(1):几个重要的对象(28.35)

    Pywin32模块为python封装了操作windows底层API函数的功能.而win32com是Pywin32下面的一个模块,专门负责操作com组件. 由于office工具(Word.Excel等) ...