Material UI 表格组件分解的奇怪行为

Question

我使用来自Material UI react components library 的表格。 我需要向 TableRow 添加一些自定义行为，因此我尝试对其进行分解（并且我计划将其包装在我的组件中以添加一些额外的 ui 和逻辑）。

所以，当我尝试分解 table component - 它破坏了标记。如您所见，没有复选框。

See Demo

我的代码：

import React from 'react';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';

const MyTableRow = () => {
  return <TableRow>
    <TableRowColumn>1</TableRowColumn>
    <TableRowColumn>John Smith</TableRowColumn>
    <TableRowColumn>Employed</TableRowColumn>
  </TableRow>;
}

const TableExampleSimple = () => (
  <Table>
    <TableHeader>
      <TableRow>
        <TableHeaderColumn>ID</TableHeaderColumn>
        <TableHeaderColumn>Name</TableHeaderColumn>
        <TableHeaderColumn>Status</TableHeaderColumn>
      </TableRow>
    </TableHeader>
    <TableBody>

      <MyTableRow />
      <MyTableRow />
      <MyTableRow />

      <TableRow>
        <TableRowColumn>2</TableRowColumn>
        <TableRowColumn>Randal White</TableRowColumn>
        <TableRowColumn>Unemployed</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>4</TableRowColumn>
        <TableRowColumn>Steve Brown</TableRowColumn>
        <TableRowColumn>Employed</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table>
);

export default TableExampleSimple;

这种行为的原因是什么？

更新

有一个假设：TableBody clones children components。 但是我仍然不知道分解 Table 组件并添加一些自定义行为的最佳实践是什么。谁能解释一下怎么做？

Answer 1

将表格组件分解为单独的组件（如果这就是您所说的“分解”）应该可以正常工作。

我已经编辑了您的示例，以便将每一行封装在一个单独的组件中。

http://www.webpackbin.com/VyxHMxyo-

或者您是否有硬性要求阻止您将所有行放在单独的组件中？

Answer 2

this question 中解决了类似的问题。

我如何解决我的问题：

Demo

const MyTableRow = (props) => {
  return <TableRow {...props}>
    { props.children[0] }
    <TableRowColumn>1</TableRowColumn>
    <TableRowColumn>John Smith</TableRowColumn>
    <TableRowColumn>Employed</TableRowColumn>
  </TableRow>;
}