使用语义 UI React 的无限滚动表(表、粘滞、可见性组件)导致 '<tr> 无法显示为 <div>' 警告的子项

Question

我已经使用语义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警告您您的变量错误地嵌套了。虽然它在您正在测试的浏览器上工作正常，但它可能会破坏其他浏览器，以略有不同。

我建议您通过将Sticky移至表顶部并通过<Visibility as={Table.Body}...或<Visibility as="tbody"...来更正此问题。不确定这些是否可以工作，但是如果我使用类似的框架，我将如何修复它。