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的名字获 ...
随机推荐
- JAVA中int与String类型的相互转换
Java的int和String类型间互相转换,小功能但是经常用到,下面是几种实现的方法: 字符串类型String转换成整数int 1. int i = Integer.parseInt([String ...
- Spring-data-redis:特性与实例(转载)
原文地址:http://www.cnblogs.com/davidwang456/p/4915109.html Spring-data-redis为spring-data模块中对redis的支持部分, ...
- Java for LeetCode 114 Flatten Binary Tree to Linked List
Given a binary tree, flatten it to a linked list in-place. For example, Given 1 / \ 2 5 / \ \ 3 4 6 ...
- 前端开发工程师必备JS技能-切图
/******************************************** 学习时间:2015年12月21日 学习者:易天曦 学习目的:掌握切图技巧 学习目标:1.学会从网页设计师的P ...
- MVC+Ext.net零基础学习记录(五)
继MVC+Ext.net零基础学习记录(四),在后面我在既有的项目上又添加了一个子项目,还用前面提到的方法,进行主项目中引用DLL,然后子项目中生成事件中使用mkdir 进行拷贝 发现一个下午就总是报 ...
- image auto fix the View
image: { flex: 1, width: null, height: null, resizeMode: 'contain' }
- GPS NMEA-0183协议介绍【转】
本文转载自:http://blog.csdn.net/haofeng82/article/details/4439349 找到的一篇关于GPS常用的一种协议的介绍,希望对大家有用 NMEA-0183 ...
- BZOJ 1572 [Usaco2009 Open]工作安排Job:贪心 + 优先队列【先放再更新】
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1572 题意: 有n个工作,每个工作有一个截止日期dead[i]和收益pay[i]. 完成一 ...
- idea创建maven-archetype-webapp项目无java目录
使用idea创建一个maven-archetype-webapp项目 查看项目的目录结构,在main的目录下没有java目录 在main目录下创建java目录 使用快捷键 ctrl+alt+shift ...
- python-多线程1
程序\进程\线程的关系: 程序(program) 一组功能集合的静态描述,程序至少有一个进程 进程(process) 进程是系统进行资源分配和调度的,他们拥有自己独立的空间,进程至少有一个线程 线程( ...