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

 

转载于:https://www.cnblogs.com/cazj/p/11083394.html