React Array - 表格数据映射

本贴最后更新于 1665 天前,其中的信息可能已经时异事殊

2019-08-29

描述

使用对象数组和属性名称列表渲染一个动态创建行的表格。

  • 使用 Object.keys()Array.prototype.filter()Array.prototype.includes()Array.prototype.reduce() 得到一个 filteredData 数组,使其数组中的每一个对象中都包含 propertyNames 中所指定的 key 值
  • 渲染一个 <table> 元素,表头 <th> 对应 propertyNames 中的每一个值
  • 使用 Array.prototype.map 渲染 propertyNames 数组中的每一个值作为 <th> 元素
  • 使用 Array.prototype.map 渲染 filteredData 数组中的每一个对象为一个 <tr> 元素,对象中的每一个 key 对应一个 <td>

该组建不能用于嵌套对象,如果 propertyNames 中指定的任何属性中存在嵌套对象,那么该组件将会进行中断

实现

function MappedTable({ data, propertyNames }) {
  let filteredData = data.map(v =>
    Object.keys(v)
      .filter(k => propertyNames.includes(k))
      .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>
  );
}

使用

const people = [
  { name: 'John', surname: 'Smith', age: 42 },
  { name: 'Adam', surname: 'Smith', gender: 'male' }
];
const propertyNames = ['name', 'surname', 'age'];
ReactDOM.render(
  <MappedTable data={people} propertyNames={propertyNames} />,
  document.getElementById('root')
);

返回总目录

每天 30 秒系列之 React

  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 444 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
Vanessa
我们终此一生,就是要摆脱他人的期待,找到真正的自己。 圣克拉拉