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

对原作 30-seconds-of-react 项目的中文化与学习，并对案例进行分析、运行和注释。 中文项目地址： 30-seconds-of-react-zh_CN-with-demo 。

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

DataList渲染为列表

通过数组渲染元素列表。

• 使用 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渲染为表格

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

*渲染一个带有两列( 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:

• 示例代码
• 运行效果

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 中指定的任何属性中有嵌套对象，则会中断。

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:

• 示例代码
• 运行效果