html - 将材质 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 中包装表格，但找不到解决方法，请帮助，我试图找到哪个父级可以出现 Table 和 td ，但还没有找到

警告：validateDOMNesting(...): 不能作为 . 在 td 中（由 Context.

标签： htmlreactjsmaterial-ui

Answer 1

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

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

代替：

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