javascript - 为什么<Table/>多次渲染时不显示复选框？

Question

我正在使用<Table/>来自http://www.material-ui.com/#/components/table 。当我渲染<TableRowColumn/>时根据数组中对象的数量多次，复选框不会出现。例如，如果有两个对象，它会呈现两行，但不显示复选框。可能是什么问题？

全新编辑

所以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

根据您收到的浏览器警告，听起来您有一个独特的 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 /> 中的组件，应该避免这种情况。

编辑:

添加了 {...rest} 的用法将任何其他 Prop 传递给 <TableRow>

添加了一个工作示例:http://www.webpackbin.com/4kNnhM2o-

编辑2:

添加了一个修改后的示例，该示例似乎更符合提问者的数据结构。 http://www.webpackbin.com/VkuA-FbhZ

编辑3:

使组件有状态以捕获和记录选定的行。由于他们的 Table 有一些怪癖实现时，需要转Table到受控组件中。 http://www.webpackbin.com/EyhKEDNhb