在 Helper 函数中渲染 JSX 元素数组
Posted
技术标签:
【中文标题】在 Helper 函数中渲染 JSX 元素数组【英文标题】:Render Array of JSX element inside Helper function 【发布时间】:2021-11-09 01:29:21 【问题描述】:简介:
我正在尝试创建本质上可以重复使用的 Table 组件。根据从父组件通过道具传递给它的数据,它可以包含任意数量的列。
为了实现这一点,我创建了如下的单独函数来填充 JSX 元素。
renderColumn
: 将列名传递作为父字符串数组的道具。
renderBody
:这将填充每行的正文和 TableRow。它将调用 renderCell
函数,该函数将返回 JSX 元素数组以推入 renderBody
方法。
renderCell
:此方法使用for
in
迭代行对象的每个属性并创建 TableCell 元素并将其推送到数组并返回理想情况下包含 JSX 元素的数组。
问题陈述:
但是,我无法在 renderBody
方法中推送 JSX 元素从 renderCell
方法返回。
我确实尝试过控制台记录它从 renderCell
方法返回的元素,这似乎只是 JSX 元素。
组件:
src\components\Table\index.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
函数的console.log
[
$$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
,
]
Complete SandBox link
数据:
[
"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:编译失败
当尝试按照following question 将内部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>
)
【问题讨论】:
【参考方案1】:要渲染一个 JSX 元素数组,你应该可以这样做:
renderCell = (row) =>
return row.map(cell =>
return <TableCell key=i align="right"> row[prop] </TableCell>
【讨论】:
【参考方案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>
来自:Create dynamic action column in React Material UI Table
【讨论】:
编译失败:Spread children are not supported in React.
@Maqsud 我从***.com/questions/60261793/…找到了一些例子以上是关于在 Helper 函数中渲染 JSX 元素数组的主要内容,如果未能解决你的问题,请参考以下文章
在 React 中,如何将 JSX 与返回更多 JSX 的 JS 函数一起返回?