将材质 ui 表包裹在 div 内

Question

render () {
    const { classes, intl, userFormData } = this.props
    const { open, usersList, isSomeFilterSelected, selected } = this.state
    return (
      <div className={classes.root}>
        <div className={classes.container}>
          <Paper className={classes.table}>
            {selected.length === 0 ? <div
              className={classNames(classes.buttons, isSomeFilterSelected ? classes.filterSelected : classes.filterAreNotSelected)}>
              {isSomeFilterSelected ? <div onClick={this.onClearFilters}>
                <Button className={classes.button}>
                  {intl.formatMessage(messages.clear)}
                  <DeleteIcon className={classes.rightIcon}/>
                </Button>
              </div> : null}
              <UserTableFilterForm
                onSubmit={this.onHandleSubmit}
                open={open}
                handleOpenStateClose={this.onHandleOpenFilters}
                handleOpenStateOpen={this.onHandleCloseFilters}
                switcher={userFormData['switchField'] ? userFormData['switchField'] : false}
              />
            </div> : null}
            {selected.length !== 0 ? <TableToolbar
              numSelected={selected.length}
              handleOnDeleteAction={this.onHandleDeleteSelectedUsers}
            /> : null}
            <Table>
              <TableHead
                onSelectAllClick={this.onSelectAllUsersFromTableForDelete}
                numSelected={selected.length}
                rowCount={usersList.length}
              />
              <TableBody
                {...this.state}
                onHandleSelected={this.onHandleSelected}
                isSelected={this.isSelected}
              />
            </Table>
            <TableFooter
              {...this.state}
              onHandlePageParameter={this.onHandlePageParameter}
              onHandleChangeRowsPerPage={this.onHandleChangeRowsPerPage}
            />
          </Paper>
        </div>
      </div>
    )
  }

上面你可以看到我的代码，下面你可以看到我加载这个页面时发生的错误，我想将表格包装在 div 中，但找不到解决方法，请帮助，我试图找到其中 parent 可以出现 Table 和 td ，但还没有找到

警告：validateDOMNesting(...): 不能作为子级出现 . 在 td 中（由 Context.Consumer 创建） 在 TableCell 中（由 WithStyles(TableCell) 创建） 在 WithStyles(TableCell) 中（由 TablePagination 创建） 在 TablePagination 中（由 WithStyles(TablePagination) 创建） 在 WithStyles(TablePagination) 中（由 TableFooter 创建） 在 TableFooter 中（由 WithStyles(TableFooter) 创建） 在 WithStyles(TableFooter) 中（由 InjectIntl​​(WithStyles(TableFooter) 创建）） 在 InjectIntl​​(WithStyles(TableFooter)) （由 UsersPage 创建） 在 div 中（由 Paper 创建） 在 Paper 中（由 WithStyles(Paper) 创建） 在 WithStyles(Paper) 中（由 mapProps(WithStyles(Paper)) 创建） 在 mapProps(WithStyles(Paper)) 中（由 WithStyles(mapProps(WithStyles(Paper))) 创建） 在 WithStyles(mapProps(WithStyles(Paper))) 中（由 UsersPage 创建） 在 div 中（由 UsersPage 创建） 在 div 中（由 UsersPage 创建） 在 UsersPage 中（由 Connect(UsersPage) 创建） 在 Connect(UsersPage) 中（由 WithStyles(Connect(UsersPage)) 创建） 在 WithStyles(Connect(UsersPage)) 中（由 InjectIntl​​(WithStyles(Connect(UsersPage))) 创建） 在 InjectIntl​​(WithStyles(Connect(UsersPage))) （由 UniversalComponent 创建） 在 UniversalComponent 中（由 Route 创建） 在 div 中（由 MainLayout 创建） 在 div 中（由 MainLayout 创建） 在 div 中（由 MainLayout 创建） 在 div 中（由 MainLayout 创建） 在 MainLayout（由 WithStyles(MainLayout) 创建） 在 WithStyles(MainLayout) 中（由 Route 创建） 在 Route 中（由 PageRoute 创建） 在 PageRoute 中（由 _default 创建） 在 Switch 中（由 _default 创建） 在 _default 中（由应用程序创建） 在 IntlProvider 中（由 Connect(IntlProvider) 创建） 在 Connect(IntlProvider) 中（由应用程序创建） 在应用程序中（由 Connect(Application) 创建） 在连接（应用程序） 在 MuiThemeProviderOld 在 JssProvider 中 在路由器中（由 ConnectedRouter 创建） 在 ConnectedRouter（由 Connect(ConnectedRouter) 创建） 在连接（连接路由器） 在提供者中

Answer 1

不确定这是否是唯一的问题，但您的 TableFooter 元素应该在 Table 内。

    <TableFooter
      {...this.state}
      onHandlePageParameter={this.onHandlePageParameter}
      onHandleChangeRowsPerPage={this.onHandleChangeRowsPerPage}
    />
    </Table>

代替：

    </Table>
    <TableFooter
      {...this.state}
      onHandlePageParameter={this.onHandlePageParameter}
      onHandleChangeRowsPerPage={this.onHandleChangeRowsPerPage}
    />