时间戳

首页 > 解决方案 > 如何在材料 ui 版本 0.20.0 中的 TableRowColumn 中嵌套 TableRows（版本很重要）？

reactjs - 如何在材料 ui 版本 0.20.0 中的 TableRowColumn 中嵌套 TableRows（版本很重要）？

问题描述

我在材料 ui 中有一个表格，它必须在一个表格行列中有两行，它看起来像这样：

<Table>
    <TableHeader>
        ...Some header
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableRowColumn>
                <TableRow>            <-------- here is the main issue
                    <TableRowColumn>
                    </TableRowColumn>
                </TableRow>
                <TableRow>
                    <TableRowColumn>
                    </TableRowColumn>
                </TableRow>
            </TableRowColumn>
        </TableRow>
    </TableBody>
</Table>

为了能够将第二行放在表中，我必须使用TableRow，TableRowColumn但由于这个原因，我得到了一堆错误：

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <td>.
Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>.
Warning: Unknown event handler property `onHoverExit`. It will be ignored.
Warning: Unknown event handler property `onHover`. It will be ignored.
Warning: Received `false` for a non-boolean attribute `hoverable`.
Warning: React does not recognize the `columnNumber` prop on a DOM element.

（控制台中的不同错误，不是一个）

我想这是因为TableRowColumn是孩子的孩子TableRow并且以不同的顺序编写它们只会阻止接收必要的道具。

如果是这种情况，我怎样才能将两行放在一列中，专门用于材料 ui 版本 0.20.0？

标签： reactjsmaterial-ui

解决方案

毕竟我解决了问题，材料 ui 版本 0 没有TableCell组件（仅在更高版本中可用），这可以解决问题。要使该特定版本摆脱错误，需要使用本机 html 标记：

<Table>
    <TableHeader>
        ...Some header
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableRowColumn>
                <table>
                    <tbody>
                        <tr><td>Content</td></tr>
                        <tr><td>Content</td></tr>
                    </tbody>
                </table>
            </TableRowColumn>
        </TableRow>
    </TableBody>
</Table>

在这种情况下，可以在一行中放置多行。

推荐阅读