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

问题

I am using <Table/> from http://www.material-ui.com/#/components/table . When I render the <TableRowColumn/> multiple times depending on how many objects are in the array, the checkboxes do not appear. For example, if there are two objects, it renders two rows, but the checkboxes don't show. What may be the issue?

COMPLETELY NEW EDIT

So the FileTable.js is rendered on another page, and it is triggered to be made by a button inside an index route 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')
)

And App.js is:

class App extends Component {

  render() {

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

I followed exactly how you implemented and got the correct property queryVehicles, yet when I pressed the button on Home.js now I got the following error:

回答1:

Based on the browser warnings you are receiving, it sounds like you have a distinct React component encapsulating the TableRow ("FileTableRow").

When you iterate over some data in the TableBody, you will see different behavior between using TableRow in-line (like in your code snippet) and a separate component (like <FileTableRow />), with regards to checkbox behavior.

With the current implementation of TableBody and TableRow, if you want to have a separate FileTableRow component, you need to have it as follows in order for the checkbox to appear.

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

Also, the warnings sound like you are wrapping the <TableRow /> components in a <div />, which should be avoided.

Edit:

Added usage of {...rest} to pass on any other props to the <TableRow>

Added a working example at: http://www.webpackbin.com/4kNnhM2o-

Edit 2:

Added a modified example with what seems to more closely match the asker's data structure. http://www.webpackbin.com/VkuA-FbhZ

Edit 3:

Made the component stateful to capture and log selected rows. Due to some quirks with their Table implementation, needed to turn the Table into a controlled component. http://www.webpackbin.com/EyhKEDNhb

回答2:

Let's tackle these warnings one by one:

For the first warning, you just have to upgrade to v 0.15.4.

For the second and third warnings, as stated, you are putting a <div> inside <tr></tr> tags and putting vice versa. You may have created a component called FileTableRow that you put inside <tr></tr> tags. This FileTableRow may have some render() function like this:

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

来源：https://stackoverflow.com/questions/39244730/why-doesnt-table-show-the-check-box-when-rendered-multiple-times