在Helper函数内呈现JSX元素的数组

Question

简介：

我正在尝试创建Table组件，它可以在自然界中重复使用。根据从父组件通过道具传递给它的数据，它可以包含任意数量的列。

为了实现这一点，我创建了如下单独的函数来填充JSX元素。

• renderColumn：它将列名传递作为父级字符串数组的道具
• renderBody：这将填充每行的正文和TableRow。它将调用renderCell函数，该函数将返回要在renderBody方法内推送的JSX元素的数组
• renderCell：该方法使用forin迭代行对象的每个属性，创建TableCell元素并将其推送到数组中，返回理想情况下包含JSX元素的数组

---

问题说明：

但是，我无法在renderBody方法内推送renderCell方法返回的JSX元素。

我确实尝试过控制台记录它从renderCell方法返回的元素，这似乎只是JSX元素。

---

组件：

srccomponentsTableindex.js

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableRow from '@material-ui/core/TableRow';
renderCell = (row) => {
var cell = [];
var i = 1;
for (var prop in row) {
if (row.hasOwnProperty(prop)) {
cell.push(<TableCell key={i} align="right">{ row[prop] }</TableCell>);
i++;
}
}
console.log(cell)
return cell;                
}
renderBody = () => {
let rows = this.props.rows
return (
<TableBody>
{rows.map( row => {
<TableRow key={row.key}>
{ this.renderCell(row) } // How do I render Array of JSX Element?
</TableRow>
})}
</TableBody>
)
}
render() {
return (
<TableContainer>
<Table  aria-label="simple table">
{ this.renderColumn() }
{ this.renderBody() }
</Table>
</TableContainer>
);
}

---

下面是来自renderCell功能的控制台日志

[
{
$$typeof: Symbol(react.element)
key: "1"
props: {align: 'right', children: 1}
ref: null
type: {$$typeof: Symbol(react.forward_ref), propTypes: {…}, Naked: {…}, options: {…}, render: ƒ, …}
_owner: FiberNode {tag: 1, key: null, stateNode: Table, elementType: ƒ, type: ƒ, …}
_store: {validated: false}
_self: Table {props: {…}, context: {…}, refs: {…}, updater: {…}, renderColumn: ƒ, …}
_source: {fileName: '/path/src/components/Table/index.js
},
]

完整SandBox链接

数据：

[
{
"key": 1,
"launch_date_utc": "2006-03-24T22:30:00.000Z",
"location": "Kwajalein Atoll",
"mission_name": "FalconSat",
"orbit": "LEO",
"launch_success": false,
"upcoming": false,
"rocket_name": "Falcon 1"
},
{...}
]

---

编辑1:编译失败

当根据以下问题尝试将内部for循环包裹在map()函数内时。如果不使用renderCell方法，它不是通过编译的。

renderBody = () => {
return (
<TableBody>
{this.props.rows.map( row => {
<TableRow key={row.key}>
{ 
for (var prop in row) {
if (row.hasOwnProperty(prop)) {
<TableCell  align="right">{ row[prop] }</TableCell>                                   
}
}
}
</TableRow>
})}
</TableBody>
)
}

Answer 1

要渲染JSX元素的数组，您应该能够执行以下操作：

renderCell = (row) => {
return row.map(cell => {
return <TableCell key={i} align="right">{ row[prop] }</TableCell>
}       
}

Answer 2

编辑：

<TableBody>
{(pagination
? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: rows
).map((row) => {
return (
<TableRow
onClick={onRowClicked(row)}
hover
role="checkbox"
tabIndex={-1}
key={row[props.rowsUniqueKey]}
>
{columns.map((column) => {
const value = row[column.id];
return (
<>
<TableCell
key={column[props.columnsUniqueKey]}
align={column.align}
>
{column.format && typeof value === 'number'
? column.format(value)
: value}
</TableCell>
</>
);
})}
{/* { enableActions && <TableCell> Actions </TableCell> } */}
</TableRow>
);
})}
</TableBody>

from：在React Material UI表中创建动态动作列