創建表與reactjs

Question

我想創建一個表使用reactjs。我寫了一個類並使用它作爲指令，傳遞了配置和數據並嘗試填充表。

function createRows() { 
    let self = this; 
    return <tbody>{_.each(self.props.tableData, function(r) { 
     <tr> 
      {_.each(self.props.columnConfigs, function(c) { 
      <td>{r[c.columnName]}</td> 
     })} 
     </tr> 
    })}</tbody>; 
} 

function createHeaders() { 

    let self = this; 
    return <thead> 
    {_.each(self.props.columnConfigs, function(c) { 
      <th>c.displayName</th> 
     })} 
    </thead> 
} 
class TableComponent extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
    } 

    render() { 

     return (<table> 
      {createHeaders.call(this)} 
      {createRows.call(this)} 
     </table>) 
    } 


} 

function TableComponentFactory() { 
    return TableComponent; 
} 

export default TableComponentFactory; 

但這不起作用。它會拋出一個錯誤： -

Invariant Violation: Objects are not valid as a React child (found: object with keys {columnName, displayName, isSortable, path, hidden, columnStyle, editable, isId}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `TableComponent`. 

這實際上是columnConfig。我無法理解爲什麼會發生這種情況。我正在做什麼錯誤，也有一些解釋會很好。

Answer 1

您應該使用'map'並在其正文中使用'return（< JSX Element >）'，而不是使用'each'（從哪個函數預期沒有返回值）。每個應該用於對數組中的每個項目應用操作而不返回數據。但是你想要返回數據，因爲你希望函數提供行和列。