Материал Компоненты таблицы пользовательского интерфейса разложение странное поведение

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; 

В чем причина такого поведения?

UPD

Существует предположение: 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>; 
}