Javascriptが - 私はそうのような2つのオブジェクトの配列を使用するテーブルを持っている。これは本当にばか質問あるいは不可能質問することができる別のアレイ

Question

から

を、オブジェクトの名前を取得します：

const columnData = [ 
    { id: 'name', label: 'Name' }, 
    { id: 'value', label: 'Value' } 
]; 

const rowData = [ 
    { name: 'Name 01', value: 100 }, 
    { name: 'Name 02', value: 150 }, 
    { name: 'Name 03', value: 200 }, 
]; 

Iこれを別のreactコンポーネントとして書いているので、私はそれを再利用することができ、ちょうど小道具として渡された2つのデータセットを変更することができます。これはすべて問題なく動作しますが、私はどのようにしてmapの行と列を動的にするかを考え出すのに苦労しています。

すなわち：

... 
{this.props.rowData.map(row => { 
    return (
    <tr> 
    {this.props.columnData.map(column => { 
     return (
     <td>{row.(THE_COLUMN_ID_TO_GET_THE_VALUE)}</td> 
    ); 
    } 
    </tr> 
); 
} 
... 

私はそれが少し曖昧だと私はここにいくつかの意味を成して願っています..私は基本的に列id名を使用してrowDataから値を取得したいです。 EG：<td>{row.name}</td><td>{row.value}</td>アイテムをハードコードしないでください。

Answer 1

オブジェクトで[]構文を使用すると、計算されたプロパティに基づいて値を取得できます。

{this.props.rowData.map(row => { 
return (
    <tr> 
    {this.props.columnData.map(column => { 
     return (
     <td>{row[column.id]}</td> 
     ); 
    } 
    </tr> 
); 
} 

Answer 2

したがって、列IDと一致する行のプロパティを取得したいだけですか？もしrow[column.id]

{this.props.rowData.map(row => { 
    return (
    <tr> 
    {this.props.columnData.map(column => { 
     return (
     <td>{row[column.id]}</td> 
    ); 
    } 
    </tr> 
); 
}