辅助函数内JSX元素的呈现数组

Question

我正在尝试创建可以在本质上重用的表组件。根据从父组件通过道具传递给它的数据，它可以包含任意数量的列。

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

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

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

我确实尝试过将它从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
  },
]

[
    {
        "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"
    },
    {...}
]

当尝试包装内为循环内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

编辑：

<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>

来自：在反应材质UI表中创建动态动作列

Answer 2

要呈现JSX元素数组，您应该能够执行以下操作：

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