使用React Data Table Component时遇Styled Components未知Prop报错求助

问题情况 #

使用依赖Styled Components的React Data Table Component，仅传入columns和data属性渲染组件后，控制台抛出多个错误：

• 提示未知属性「responsive」被传递到DOM节点，可能触发React控制台错误
• 提示isActive等属性存在问题，但代码中并未手动使用这些属性

可行解决方案 #

1. 配置Styled Components过滤非DOM属性 #

如果是自己封装了DataTable组件，在使用styled创建样式组件时，通过shouldForwardProp指定不需要传递给原生DOM的属性：

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

const StyledDataTable = styled(DataTable).withConfig({
  shouldForwardProp: (prop) => !['responsive', 'isActive'].includes(prop),
})`
  // 自定义样式代码
`;

2. 升级React Data Table Component版本 #

部分旧版本的React Data Table Component存在内部属性误传递的bug，升级到最新稳定版可解决：

# npm
npm update react-data-table-component

# yarn
yarn upgrade react-data-table-component

3. 显式设置组件默认属性 #

查看官方文档确认组件默认启用的配置（比如responsive可能是默认开启的），显式设置这些属性的值来消除错误：

<DataTable
  columns={yourColumns}
  data={yourData}
  responsive={false} // 根据需求设置为true或false
/>

4. 使用Styled Components的临时属性（Transient Props） #

如果是自定义的属性，在属性名前添加$前缀，Styled Components会自动跳过将其传递给DOM节点：

const StyledDataTable = styled(DataTable)`
  background: ${props => props.$isActive ? '#eee' : '#fff'};
`;

// 使用组件时
<StyledDataTable
  $isActive={someCondition}
  columns={yourColumns}
  data={yourData}
/>

内容的提问来源于stack exchange，提问作者Nosarumen Imuentinyan