无限滚动 Table 使用语义 UI React（Table、粘性、可见性组件）导致 `<tr> 不能作为 <div>` 警告的子项出现

Question

我使用语义 UI React 创建了一个具有无限滚动功能的 table。我正在使用 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 移动到 table 的顶部并传递 <Visibility as={Table.Body}... 或 <Visibility as="tbody"... 来更正此问题。不确定这些是否有效，但如果我使用类似的框架，我将如何修复它。

无限滚动 Table 使用语义 UI React（Table、粘性、可见性组件）导致 `<tr> 不能作为 <div>` 警告的子项出现

Infinite scroll Table using Semantic UI React (Table, Sticky, Visibility components) causing `<tr> cannot appear as a child of <div>` warnings

javascript

reactjs

semantic-ui-react