從物件陣列中過濾指定的屬性行，以動態表單形式渲染成表格
技能
- 使用
Object.keys()，Array.prototype.filter()，Array.prototype.includes()和Array.prototype.reduce()，得到過濾 後的filteredData陣列，過濾資料包含具有規定key的所有物件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))
.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>
);
}其它
- 該元件不適用於巢狀物件，如果在
propertyNames
用法
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')
);效果
| name | surname | age |
|---|---|---|
| John | Smith | 42 |
| Adam | Smith |