在 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 元素数组的主要内容,如果未能解决你的问题,请参考以下文章

如何在反应中从渲染函数返回一个空的jsx元素?

如何渲染 JSX 元素数组(React 组件)

根据条件渲染 JSX 元素

在 React 中,如何将 JSX 与返回更多 JSX 的 JS 函数一起返回?

Rails 5 - application_helper.rb 中定义的渲染数组

在 DOM 中仅渲染子元素而不是整个 JSX 元素