react.jsを使用してテーブル行を動的に生成する方法

Question

現在、テーブルのヘッダーと行の両方を生成していますが、行を少し動的にしたいと考えています。何度も反復せずに行のデータを印刷するにはどうすればよいですか？ヘッダーのように1つのステートメントを使ってどうすればいいですか？そこで、基本的

const schoolData = [ 
{ school : 'Middle School', year : '2017', date : '6/12/17', location : 
'Class',}, 
{ school : 'High School', year : '2017', date : '2/24/17', location : 
'Gym',}, 

]; 


export default class Table extends Component { 

render() { 
const headers = Object.keys(schoolData[0]).map(header => 
<TableHeaderColumn>{header}</TableHeaderColumn>); 

return (
    <Tabs> 
<Tab label="School Type"> 
<Table> 
    <TableHeader> 
    <TableRow> 
     {header} 
    </TableRow> 
    </TableHeader> 
    <TableBody> 
    {schoolData.map((row) => (
     <TableRow> 
     <TableRowColumn>{row.school}</TableRowColumn> 
     <TableRowColumn>{row.year}</TableRowColumn> 
     <TableRowColumn>{row.date}</TableRowColumn> 
     <TableRowColumn>{row.location}</TableRowColumn> 
     </TableRow> 
    ))} 
    </TableBody> 
</Table> 

Answer 1

...私はちょうど「{行}」呼ぶだろうと、それは行が「{row.school}」などを入力する代わりに含まれているすべてのものを生成する必要がありますオブジェクトを受け取ったObject.values(obj)を使用して、key: valueのオブジェクトをすべてvalueの配列で返します。

だから、あなたができる：

{schoolData.map(row => (
    <TableRow> 
    {Object.values(row).map(rowValue => 
     <TableRowColumn>{rowValue}</TableRowColumn> 
    )} 
    </TableRow> 
))} 

をあなたは常にマップの前にObject.values(row)によって返された配列をソートすることができます。しかし、とにかく私は思っています。または、rowオブジェクトを目的の方法でソートした配列に解析し、次にsortedRow.map(...)を実行します。

しかし、私たちはコードを1行だけではなく始めます。あなたの方法は書いたほうが速く、読んだほうが簡単ですが、このようにすることは後でもう少しメンテナンスが可能です。

Answer 2

私はこのようにObject.keysを使用しません。 Object.keysの出力を任意に発注され、同じ形状を有しているオブジェクト間の一貫性が保証されていません。

Object.keys({foo: 'foo', bar: 'bar', baz: 'baz'}) 
// -> ["foo", "bar", "baz"] 
Object.keys({bar: 'bar', baz: 'baz', foo: 'foo'}) 
// -> ["bar", "baz", "foo"] 
Object.keys({ baz: 'baz', bar: 'bar', foo: 'foo'}) 
// -> ["baz", "bar", "foo"] 

この問題には多くのアプローチがあります。 1つの方法は、単に多次元配列をコンポーネントに渡すことです：

[ 
    ['header1', 'header2', 'header3', 'header 4'], 
    ['row 1 cell 1', 'row 1 cell 2', 'row 1 cell 3', 'row 1 cell 4'], 
    [...], 
]