react 数组_使用 React 把数组数据渲染为列表、表格

这里学习第一节，Array，即把数组数据渲染为列表、表格。

DataList渲染为列表

通过数组渲染元素列表。

使用 isOrdered

prop 的值有条件地渲染

或

列表。

使用 Array.prototype.map

将 data

中的每个项目渲染为

元素，给它一个由其索引和值的串联产生的 key

。

默认情况下，省略 isOrdered

prop 以渲染

列表。

function DataList({ isOrdered, data }) {

const list = data.map((val, i) =>

{val});

return isOrdered ?

1. {list}

:

• {list}

;

}

复制代码

例子

export default function() {

const names = ['John', 'Paul', 'Mary'];

return (

无序列表：

有序列表：

);

}

复制代码

ps:

DataTable渲染为表格

通过数组渲染表格，动态创建每一行。

*渲染一个带有两列( ID

和 Value

)的

元素。

*使用 Array.prototype.map

将 data

中的每个项目渲染为

元素，由其索引和值组成，给它一个由两者串联产生的 key

。

function DataTable({ data }) {

return (

IDValue

{data.map((val, i) => (

{i}{val}

))}

);

}

复制代码

例子

export default function() {

const people = ['John', 'Jesse'];

return ;

}

复制代码

ps:

MappedTable渲染为映射表格

通过对象数组渲染表格，属性名称与列对应，动态创建每一行。

使用 Object.keys()

， Array.prototype.filter()

， Array.prototype.includes()

和 Array.prototype.reduce()

生成一个 filteredData

数组，包含所有对象 使用 propertyNames

中指定的键。

渲染一个

元素，其中一组列等于 propertyNames

中的值。

使用 Array.prototype.map

将 propertyNames

数组中的每个值渲染为

元素。

使用 Array.prototype.map

将 filteredData

数组中的每个对象渲染为

元素，对象中的每个键包含一个

。

function MappedTable({ data, propertyNames }) {

let filteredData = data.map(v =>

Object.keys(v)

.filter(k => propertyNames.includes(k))

// 迭代为 acc 对象赋值：

// 回调函数为 (acc, key) => ((acc[key] = v[key]), acc) 初始值为 {}

// ((操作), 返回值) 语法解读：括号里进行任意操作，并指定返回值

.reduce(( acc, key) => ((acc[key] = v[key]), acc), {}),

);

return (

{propertyNames.map(val => (

{val}

))}

{filteredData.map((val, i) => (

{propertyNames.map(p => (

{val[p]}

))}

))}

);

}

复制代码

Notes

此组件不适用于嵌套对象，如果在 propertyNames

中指定的任何属性中有嵌套对象，则会中断。

例子

export default function() {

const people = [

{ name: 'John', surname: 'Smith', age: 42 },

{ name: 'Adam', surname: 'Smith', gender: 'male' },

];

const propertyNames = ['name', 'surname', 'age'];

return ;

}

复制代码

ps: