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中，但是找不到解决方法，请帮助，我试图找到在其中父项可以出现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创建）在纸上（由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）创建）在Connect（应用程序）在MuiThemeProviderOld 在JssProvider中在路由器中（由ConnectedRouter创建）在ConnectedRouter中（由Connect（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}
    />

在div内包装材料ui表

1 个答案: