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} />; } 複製代碼