列表渲染

凯宾斯基 / 2023-05-08 / 原文

常规展示

import React from 'react'


export default class App extends React.Component {

    state={
        list:[{"id":1,"text":"张三"},{"id":2,"text":"李四"}]
    }

    render() {
        //map有个形参 index 可以拿来当key
        var newlist=this.state.list.map((item,index)=><li key={index}>{item.text}</li>)
        return (
            <div>
                {/* 写法一 */}
                <ul>
                {this.state.list.map(item=><li key={item.id}>{item.text}</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>

todoList添加

import React from 'react'


export default class App extends React.Component {

    myref = React.createRef()

    state = {
        list: [{"id":1,"name":"李四"},{"id":2,"name":"张三"}]
    }

    render() {
        return (

            <div>
                {/* 获取输入框的内容 写法二 */}
                <input ref={this.myref}></input>
                <button onClick={this.handleClick2}>获取输入框的值</button>
                <ul>
                    {this.state.list.map(item => <li key={item.id}>{item.name}</li>)}
                </ul>
            </div>
        )
    }

    handleClick2 = () => {
        // 追加数据---但是不建议这么直接操作修改
        // this.state.list.push(this.myref.current.value)

        // 要深拷贝再负值
        let newlist =[...this.state.list]
        newlist.push(
            {
                "id":Math.random()*1000000,
                "name":this.myref.current.value
            }
            )

        //通知dom 更新数据
        this.setState({
            list:newlist
        }
        )
        console.log('click2', this.state.list)
    }
}