Question

我在材料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放置在一列中？

Answer 1

在我解决了所有问题之后，材料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>

在这种情况下，可以在一行中容纳多行。

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

1 个答案: