2022-1-12

import React from 'react'

const list = [
    {
        name:'关羽',
        age:20,
        dayin() {
            console.log(1);
        },
        renderItem(dayin) {
            return (
                <div onClick={dayin}>关云长会大刀</div>
            )
        }
    },
    {
        name:'张飞',
        age:20,
        dayin() {
            console.log(2);
        },
        renderItem(dayin) {
            return (
                <div onClick={dayin}>张翼德会长矛</div>
            )
        }
    },
    {
        name:'刘备',
        age:22,
        renderItem() {
            return (
                <div>刘玄德会双股剑</div>
            )
        }
    },
]
export default function Home() {

    return (
        <div>
            首页
            <div>
                {
                    list.map((item,index)=>{
                        let { name,age,renderItem,dayin } = item;
                        return (
                            <div>
                                姓名:{name}--年龄:{age}
                                {
                                    renderItem(dayin)
                                }
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}

注：以后尽量在js中通过函数return一些html结构,能够简化代码,使html行数减少,代码看上去更加简洁