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