列表渲染

依赖 JavaScript 的特性，例如for循环、array的 map() 函数来渲染组件列表。

假设有这么一个列表：

export const list = [
    {name: "小明", age: 18}
    {name: "老王", age: 19}
    {name: "张三", age: 20}
]

那么，如何让它在前端页面显示呢？

{list.map((item, index) => (
    <div key={index}>我叫{item.name}，我今年{item.age}岁了。</div>
))}

如上图所示，这既是简单的列表渲染，那如果我想渲染友链那种成组的列表该怎么办呢？

exprot const listWithGroup = [
    {
        order: "男生",
        list: [
            {name: "小明", age: 18}
            {name: "老王", age: 19}
        ]
    },{
        order: "女生",
        list: [
            {name: "小娟", age: 20}
            {name: "小靓", age: 24}
        ]
    }
]

如上所示，一个简单的组列表渲染就已经成型了，接下来就是和之前一样，在前端将其按组渲染出来：

{ListWithGroup.map((item, index) => (
    <div key={index}>
        <div>这里是{item.order}组。</div>
        // 如下，开始嵌套渲染
        <div>
            {item.list.map((staff, index) => (
                <div key={index}>我叫{staff.name}，我今年{staff.age}岁了。</div>
            ))}
        </div>
    </div>
))}

同时，不要忘记给你的列表设置属性：

interface list {
    name: string;
    age: number;
}

嵌套列表：

interface ListWithGroup {
    order: string;
    list: list[];
    name: string;
    age: number;
}