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的名字获 ...
随机推荐
- thinkphp5, 结合pgsql使用时, 要先运行这段sql代码
按照tp5的官方文档的说法, 必须这么做: 先执行一段sql代码 CREATE OR REPLACE FUNCTION pgsql_type(a_type varchar) RETURNS varch ...
- Python爬虫-- PyQuery库
PyQuery库 PyQuery库也是一个非常强大又灵活的网页解析库,PyQuery 是 Python 仿照 jQuery 的严格实现.语法与 jQuery 几乎完全相同,所以不用再去费心去记一些奇怪 ...
- Nodejs学习笔记 --- 调用命令方法ld_process.exec()和child_process.execFile()
本文主要记录项目中使用NodeJS实现在线构建项目时,通过代码自动调用命令行. 参考资料&内容来源: Nodejs官网:http://nodejs.cn/api/child_process.h ...
- 流畅的python学习笔记:第十三章:重载运算符__add__,__iadd__,__radd__,__mul__,__rmul__,__neg__,__eq__,__invert__,__pos__
在前面第十章以及第一章的时候介绍了Vector对象的运算符重载.第十三章专门介绍运算符重载.这里我们看几个之前没讲过的运算符__neg__,__pos__,__invert__ class Vecto ...
- jquery .html(),.text(),.val()用法
.html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html(),.text() ...
- 运用<ul><li>做导航栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- sprint-boot @ComponentScan扫描多个包
使用@ComponentScan扫描多个包时, @ComponentScan({"ka","com"}) 注意包名不能为org,不然无法启动
- LeetCode:子集 II【90】
LeetCode:子集 II[90] 题目描述 给定一个可能包含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: [1,2,2] 输出: ...
- Java多线程系列 基础篇05 synchronized关键字
1. synchronized原理 在java中,每一个对象有且仅有一个同步锁,所以同步锁是依赖于对象而存在.当我们调用某对象的synchronized方法时,就获取了该对象的同步锁.例如,synch ...
- Android Weekly Notes Issue #321
Android Weekly Issue #321 August 5th, 2018. Android Weekly Issue #321 本期内容包括: 开源项目Plaid的改版; 使用Tensor ...