react中循环节点的方式以及图片引用的方式
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中循环节点的方式以及图片引用的方式的更多相关文章
- vue、react中循环遍历为什么会有key,key有什么作用?
先讲一下,vue和react都是在操作虚拟dom,并且根据diff算法进行新旧dom对比,从而更新dom,以vue举例: vue官方文档中写到有 key 的特殊属性主要用在 Vue 的虚拟 DOM 算 ...
- React中循环渲染类似Vue中 的v-for
17==>循环数组 类似v-for import React, { Component } from "react"; export default class CharSh ...
- React中使用 react-router-dom 路由传参的三种方式详解【含V5.x、V6.x】!!!
路由传值的三种方式(v5.x) params参数 //路由链接(携带参数): <Link to='/demo/test/tom/18'}>详情</Link> //或 <L ...
- 复习下C 链表操作(单向循环链表、查找循环节点)
循环链表 稍复杂点. 肯能会有0 或 6 字型的单向循环链表. 接下来创建 单向循环链表 并 查找单向循环链表中的循环节点. 这里已6字型单向循环链表为例. //创建 循环链表 Student * ...
- react之本地图片引用
react之本地图片引用 <img src="../images/photo.png"/> 这种写法在react中是不支持的,所以引用本地图片需要用import或者re ...
- 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】
## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- React 深入系列1:React 中的元素、组件、实例和节点
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...
- react中的ref的3种方式
2020-03-31 react中的ref的3种方式 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获 ...
随机推荐
- Linux 日志命令
当日志文件存储日志很大时,我们就不能用vi直接进去查看日志,需要Linux的命令去完成我们的查看任务 Log位置: /var/log/message 系统启动后的信息和错误日志,是Red Hat Li ...
- Golang 环境变量及工作区概念
GOROOT go的安装路径 GOPATH 可以有多个目录,每个目录就是一个工作区,放置源码文件,以及安装后的归档文件和可执行文件: 第一个工作区比较重要,go get会自动从一些主流公用代码仓库下载 ...
- segnet 编译与测试
segnet 编译与测试参考:http://sunxg13.github.io/2015/09/10/caffe/http://m.blog.csdn.net/lemianli/article/det ...
- Django框架ORM单表添加表记录_模型层
此方法依赖的表时之前创建的过的一张表 参考链接:https://www.cnblogs.com/apollo1616/p/9840354.html 方法1: # 语法 [变量] = [表名].obje ...
- 流畅python学习笔记:第十四章:迭代器和生成器
迭代器和生成器是python中的重要特性,本章作者花了很大的篇幅来介绍迭代器和生成器的用法. 首先来看一个单词序列的例子: import re re_word=re.compile(r'\w+') c ...
- quick-cocos2d-x 系列之——环境搭建(Mac版)
quick-cocos2d-x简单介绍 何为quick-cocos2d-x? ? 简单一句话:quick-cocos2d-x是採用lua语言,通过tolua++工具对cocos2d-x进一步封装, ...
- 关于SAP S4 HANA 的13个问题
SAP S/4HANA的路线图是怎样的?价格是多少?下一步还将添加哪些新模块?莫不闻专业SAP问答平台结合SAP HANA及SAP HANA应用商务套件开发全球负责人Uwe Grigoleit帮大家整 ...
- Gemini.Workflow 双子工作流入门教程二:定义流程:流程节点介绍
简介: Gemini.Workflow 双子工作流,是一套功能强大,使用简单的工作流,简称双子流,目前配套集成在Aries框架中. 下面介绍本篇教程:流程定义:流程节点属性. 流程节点: 左侧是节点工 ...
- 微信小程序开发:学习笔记[4]——样式布局
微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...
- P5105 不强制在线的动态快速排序
P5105 不强制在线的动态快速排序 $\bigoplus \limits_{i=2}^n (a_i^2-a_{i-1}^2) = \bigoplus \limits_{i=2}^n (a_i-a_{ ...