react中循环节点的方式以及图片引用的方式

Posted 2022-02-11 cazj

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‘) /> // 通过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