如何使用react.js動態生成錶行

目前，我正在生成表頭和行，但我想使行更加動態。如何在不迭代多次的情況下打印行的數據？我如何使用1個語句就像標題一樣？所以基本上我只想叫「{}行」，它應該產生行包含，而不必輸入「{row.school}」等一切......如何使用react.js動態生成錶行

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>

來源

2017-06-22 John Berry

發佈您的'TableRow'組件的代碼。你可能會做的就是修改這個類，這樣你就可以簡單地將它傳遞給一個「行」對象，並在內部構造它自己的「TableRowColumn」。 – jered

沒有代碼表示所有的代碼都在上面 –

您可以使用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(...)。

但是我們開始獲得的不僅僅是一行代碼，不是嗎？你的方式寫得更快，閱讀更簡單，但以後這樣做會更容易維護，無論你最適合什麼樣的方式。

來源

2017-06-23 01:32:32 cfraser

我不會用這種方式使用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"]

有許多方法解決這個問題。一種方法是將多維數組傳遞給組件：

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

來源

2017-06-23 02:24:11 maxhallinan

如何使用react.js動態生成錶行

回答

相關問題