反应数据表组件错误警告：反应无法识别“sortActive”

Question

我正在使用react-data-table-components，并且只是按照文档给出的说明进行操作，但它向我显示了一个错误（其中一些在下面的文本中）：

错误

以下是我在文档中复制的示例代码：

import DataTable from 'react-data-table-component';

const App = () => {

  const columns = [
      {
          name: 'Title',
          selector: row => row.title,
      },
      {
          name: 'Year',
          selector: row => row.year,
      },
  ];
  const data = [
      {
          id: 1,
          title: 'Beetlejuice',
          year: '1988',
      },
      {
          id: 2,
          title: 'Ghostbusters',
          year: '1984',
      },
  ]

  return (
    <>
        <DataTable
            columns={columns}
            data={data}
        />
    </>
  )
}

export default App

下面是package.json文件：

包.json

这些是我的控制台中显示的错误：

StyledComponent.ts:159 styled-components：看起来一个未知的 prop“responsive”正在被发送到 DOM，这可能会触发 React 控制台错误。<StyleSheetManager shouldForwardProp={...}>如果您希望自动过滤未知的 props，您可以通过（连接类似的 API ）选择该行为，@emotion/is-prop-valid或者考虑使用瞬态 props（$自动过滤的前缀。）

react-dom.development.js:86 警告：React 无法识别sortActiveDOM 元素上的 prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写sortactive。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。

react-dom.development.js:86 警告：收到false非布尔属性dense。

react-dom.development.js:86 警告：React 无法识别fixedHeaderDOM 元素上的 prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写fixedheader。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。

Answer 1

我通过将我的版本降级styled-components到 v5.3.3 解决了这个问题，正如 @aldwinp35 评论的那样：

代码是正确的。发生的情况是react-data-table-component使用旧版本的styled-components. 因此，要消除错误，请降级styled-components到 v5.3.3。另外，存储库上有一个react-data-table-component针对此问题的 PR，但尚未合并。