React 30 秒速学：把数组数据渲染为列表、表格

时间 2019-11-21

标签 react 数组数据渲染列表表格栏目 React 繁體版

原文原文链接

本文译自：30-seconds-of-react。React 30 秒速学：全篇中文翻译、学习，地址：30-seconds-of-react-zh_CN-umi，全部案例进行分析、注释、上线。react

系列文章：git

DataList渲染为列表

经过数组渲染元素列表。github

使用 isOrdered prop 的值有条件地渲染<ol>或<ul>列表。
使用Array.prototype.map将data中的每一个项目渲染为<li>元素，给它一个由其索引和值的串联产生的key。
默认状况下，省略 isOrdered prop 以渲染<ul>列表。

function DataList({ isOrdered, data }) {
  const list = data.map((val, i) => <li key={`${i}_${val}`}>{val}</li>);
  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
}
复制代码

例子

export default function() {
  const names = ['John', 'Paul', 'Mary'];
  return (
    <div>
      无序列表：
      <DataList data={names} />
      有序列表：
      <DataList data={names} isOrdered />
    </div>
  );
}
复制代码

ps:数组

DataTable渲染为表格

经过数组渲染表格，动态建立每一行。app

*渲染一个带有两列(ID和Value)的<table>元素。 *使用Array.prototype.map将data中的每一个项目渲染为<tr>元素，由其索引和值组成，给它一个由二者串联产生的key。函数

function DataTable({ data }) {
  return (
    <table> <thead> <tr> <th>ID</th> <th>Value</th> </tr> </thead> <tbody> {data.map((val, i) => ( <tr key={`${i}_${val}`}> <td>{i}</td> <td>{val}</td> </tr> ))} </tbody> </table>
  );
}
复制代码

例子

export default function() {
  const people = ['John', 'Jesse'];
  return <DataTable data={people} />; } 复制代码

ps:post

MappedTable渲染为映射表格

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

使用Object.keys()，Array.prototype.filter()，Array.prototype.includes()和Array.prototype.reduce()生成一个filteredData数组，包含全部对象使用propertyNames中指定的键。
渲染一个<table>元素，其中一组列等于propertyNames中的值。
使用Array.prototype.map将propertyNames数组中的每一个值渲染为<th>元素。
使用Array.prototype.map将filteredData数组中的每一个对象渲染为<tr>元素，对象中的每一个键包含一个<td>。

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 (
    <table> <thead> <tr> {propertyNames.map(val => ( <th key={`h_${val}`}>{val}</th> ))} </tr> </thead> <tbody> {filteredData.map((val, i) => ( <tr key={`i_${i}`}> {propertyNames.map(p => ( <td key={`i_${i}_${p}`}>{val[p]}</td> ))} </tr> ))} </tbody> </table>
  );
}
复制代码

Notes

此组件不适用于嵌套对象，若是在propertyNames中指定的任何属性中有嵌套对象，则会中断。ui

例子

export default function() {
  const people = [
    { name: 'John', surname: 'Smith', age: 42 },
    { name: 'Adam', surname: 'Smith', gender: 'male' },
  ];
  const propertyNames = ['name', 'surname', 'age'];
  return <MappedTable data={people} propertyNames={propertyNames} />; } 复制代码

ps:spa