Почему не <Table/> показывать флажок при визуализации несколько раз?

Question

Я использую <Table/> от http://www.material-ui.com/#/components/table. Когда я рисую <TableRowColumn/> несколько раз в зависимости от количества объектов в массиве, флажки не отображаются. Например, если есть два объекта, он отображает две строки, но флажки не отображаются. В чем может быть проблема?

АБСОЛЮТНО НОВЫЙ EDIT

Так FileTable.js оказывается на другой странице, и это срабатывает быть сделано с помощью кнопки внутри индекса маршрута Home.js.

render(
    <div> 
    <Provider store={store}> 
     <Router history={hashHistory}> 
     <Route 
      component={RequireAuth(App)} 
      path='App' 
     > 
      <IndexRoute 
      component={Home} 
      /> 
      <Route 
      component={FileTable} 
      path='/FileTable' 
      /> 
     </Route> 
     </Router> 
    </Provider> 
    </div>, 
    document.getElementById('app') 
) 

И App.js является:

class App extends Component { 

    render() { 

    return (
     <div> 
      {React.cloneElement(this.props.children, this.props)} 
     </div> 
    ); 
    } 
} 

Я следовал точно, как вы реализовали и получили правильную собственность queryVehicles, но когда я нажал кнопку на Home.js теперь я получил следующее сообщение об ошибке:

Answer 1

Основываясь на предупреждениях браузера, которые вы получаете, похоже, что у вас есть объявление istinct React, инкапсулирующий TableRow ("FileTableRow").

Когда вы итерацию по некоторым данным в TableBody, вы будете видеть различное поведение между использованием TableRow в линию (как в вашем фрагменте кода) и отдельный компонент (например, <FileTableRow />), в отношении поведения флажком.

С текущей реализации TableBody и TableRow, если вы хотите иметь отдельный FileTableRow компонент, вы должны иметь это следующим образом для того, чтобы флажок, чтобы появиться.

const FileTableRow = (props) => { 
    const { children, Date, Start_Time, End_Time, Type, ...rest } = props 

    // The checkbox element will be inserted by the <TableBody> as a child 
    // of this component. So if we have a separate row component like this, 
    // we need to manually render it from the props.children 

    // We also use {...rest} to pass any other props that the parent <TableBody /> 
    // passed to this component. This includes any handlers for the checkbox. 
    return (
    <TableRow {...rest}> 
     {children[0]} 
     <TableRowColumn>{Date}</TableRowColumn> 
     <TableRowColumn>{Start_Time}</TableRowColumn> 
     <TableRowColumn>{End_Time}</TableRowColumn> 
     <TableRowColumn>{Type}</TableRowColumn> 
    </TableRow> 
) 
} 

Кроме того, предупреждения звучат как вы обертывание <TableRow /> компоненты в <div />, которые следует избегать.

Edit:

Добавлено использование {...rest} передать любой другой реквизит к <TableRow>

Добавлен рабочий пример по адресу: http://www.webpackbin.com/4kNnhM2o-

Edit 2:

Добавлено модифицированный пример с что, по-видимому, более точно соответствует структуре данных аскетизма. http://www.webpackbin.com/VkuA-FbhZ

Edit 3:

Сделан компонент Stateful для захвата и регистрации выбранных строк. Из-за некоторых причуд с их реализацией Table необходимо было превратить Table в управляемый компонент. http://www.webpackbin.com/EyhKEDNhb

Answer 2

Давайте решать эти предупреждения по одному:

за первое предупреждение, вы просто должны обновить против 0.15.4.

Для второго и третьего предупреждений, как указано, вы помещаете <div> внутри <tr></tr> тегов и наоборот. Возможно, вы создали компонент под названием FileTableRow, который вы помещаете в теги <tr></tr>. Эта функция FileTableRow может иметь некоторую функцию render() следующим образом:

render() { 
    return (
     <div> 
      ... some code here ... 
     </div> 
    ) 
}