Question

我使用Semantic UI React创建了一个无限滚动的表。我使用Sticky，Table，Visibility组件的组合。它似乎表现正常并完成了我想要的东西。

但是我收到以下警告：

Warning: validateDOMNesting(...): <div> cannot appear as a child of <thead>.
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.

我可以安全地忽略这些警告吗？一切似乎都运转良好，我只是害怕未来更大的问题。

我正在尝试找到一种更好的实现无限滚动的方法，而不会出现上面列出的警告。这是当前的实现：

import React from 'react'
import PropTypes from 'prop-types'
import { Sticky, Table, Visibility } from 'semantic-ui-react'


class InfiniteScrollTable extends React.Component {
  constructor(props) {
    super(props)

    this.state = {}
  }

  handleContextRef = contextRef => this.setState({ contextRef })

  render() {
    const { contextRef } = this.state
    const { children, headerRow, ...rest } = this.props

    return (
      <div ref={this.handleContextRef}>
        <Table {...rest}>

          <Table.Header>
            <Sticky context={contextRef}>{headerRow}</Sticky>
          </Table.Header>

          <Visibility
            as="tbody"
            continuous={false}
            once={false}
            onBottomVisible={() => console.log('This will call API')}
          >
            {children}
          </Visibility>

        </Table>
      </div>
    )
  }
}


InfiniteScrollTable.propTypes = {
  headerRow: PropTypes.element.isRequired,
  children: PropTypes.arrayOf(PropTypes.element).isRequired,
}

InfiniteScrollTable.defaultProps = {}

export default InfiniteScrollTable

Answer 1

这里的问题是，react会警告您错误地嵌套了变量。虽然它在您正在测试的浏览器上运行良好，但它可能在其他实现DOM的浏览器上有所不同。

我建议您通过将Sticky移到表格顶部并传递<Visibility as={Table.Body}...或<Visibility as="tbody"...来更正此问题。不确定这些是否可行，但如果我使用类似的框架，那就是我要解决的问题。

使用语义UI反应（表，粘滞，可见性组件）的无限滚动表导致`不能作为<div>`警告的子项出现

1 个答案: