Как я могу вложить TableRows в TableRowColumn в материале версии 0.20.0 (версия важна)? - PullRequest
Новая
       13

Как я могу вложить TableRows в TableRowColumn в материале версии 0.20.0 (версия важна)?

0 голосов
/ 01 ноября 2018

У меня есть таблица в пользовательском интерфейсе материала, которая должна иметь две строки в одном столбце строки таблицы, это выглядит так: 

<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, и написание их в другом порядке просто не позволяет получить необходимый реквизит.

Если это так, как я могу разместить две строки в одном столбце специально для материала версии 0.20.0?

1 Ответ

0 голосов
/ 01 ноября 2018

После того, как я решил проблему, версия 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>

В этом случае можно разместить несколько строк в одном ряду.

...