Material UI Tabelle Komponenten Zersetzung seltsames Verhalten

Question

Ich verwende Tabelle von Material UI react components library. Ich muss einige benutzerdefinierte Verhalten zu TableRow hinzufügen, also versuche ich es zu zerlegen (und ich plane, es in meine Komponente einzubinden, um einige zusätzliche ui und Logik hinzuzufügen).

Also, wenn ich versuche, table component zu zerlegen - es ist Pausen Markup. Wie Sie sehen können, fehlen Kontrollkästchen.

See Demo

Mein Code:

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; 

Was ist der Grund für ein solches Verhalten?

UPD

Es ist eine Annahme: TableBody clones children components. Aber ich weiß immer noch nicht, was ist die beste Praxis der Dekomposition von Table-Komponenten und fügen Sie einige benutzerdefinierte Verhalten hinzu. Kann mir jemand erklären, wie es geht?

Answer 1

Die Tabellenkomponenten in separate Komponenten aufteilen (wenn Sie das mit "decomposite" meinen), sollte korrekt funktionieren.

Ich habe Ihr Beispiel so bearbeitet, dass jede Zeile in einer separaten Komponente gekapselt ist.

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

Oder haben Sie eine harte Anforderung haben, die Sie verhindert, dass alle Zeilen in einer separaten Komponente?

Answer 2

Ähnliche Probleme gelöst in this question.

Wie löse ich mein Problem:

Demo

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