Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

React Array - 表格数据映射

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


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

推荐阅读
留下你的脚步