列表渲染-JZTXT

import React from 'react'


export default class App extends React.Component {

    state={
        list:[1,2,3,4,5,6]
    }

    render() {
        var newlist=this.state.list.map(item=><li>{item}</li>)
        return (
            <div>
                {/* 写法一 */}
                <ul>
                {this.state.list.map(item=><li>{item}</li>)}
                </ul>

                 {/* 写法二 */}
                 <ul>
                     {newlist}
                </ul>
            </div>
        )
    }

  

}

// 原生js写法
// var list=[1,2,3]
// var newlist=list.map(item=>`<li>${item}</li>`)
// console.log(newlist.join(""))
// 输出 <li>1</li><li>2</li><li>3</li>