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

Question

我正在使用 http://www.material-ui.com/#/components/table 中的 <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} 的用法以将任何其他道具传递给 <TableRow>

在以下位置添加了一个工作示例：http://www.webpackbin.com/4kNnhM2o-

编辑 2：

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

编辑 3：

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

Answer 2

让我们一一解决这些警告：

对于第一个警告，您只需升级到 v 0.15.4。

如前所述，对于第二个和第三个警告，您将 <div> 放在 <tr></tr> 标签内，反之亦然。您可能已经创建了一个名为 FileTableRow 的组件，并将其放入 <tr></tr> 标记内。这个 FileTableRow 可能有一些像这样的 render() 函数：

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

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

Why doesn't <Table/> show the check box when rendered multiple times?

html

javascript

reactjs

react-jsx

material-ui