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组件，则需要按如下方式显示该复选框。< / p>

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>
    )
}

多次渲染时为什么不显示复选框？

2 个答案: