javascript - 使用语义 UI React(表、粘性、可见性组件)的无限滚动表导致 `<tr> cannot appear as a child of <div>` 警告

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"... .不确定这些是否可行，但如果我要使用类似的框架，我会这样解决它。