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

最新推荐文章于 2024-07-03 23:00:22 发布

weixin_34392843

最新推荐文章于 2024-07-03 23:00:22 发布

阅读量1.3k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ce0279b6fb9a07eae2a2d8d

版权

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

这里学习第一节，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} />;
}
复制代码