使用react-table时Vercel编译报react/display-name组件缺少display name错误

报错原因 #

这是ESLint规则react/display-name触发的校验错误：你在第49行直接给Cell属性传递了匿名箭头函数，该函数会被react-table作为React组件渲染，ESLint要求所有React组件都需要有明确的display name用于开发调试，因此抛出报错。

解决方案 #

方案1：抽离具名组件（最推荐）

将Cell对应的渲染逻辑抽成单独的具名函数组件，ESLint会自动识别函数名为组件的display name：

// 抽离为具名组件
const StatusCell = ({ row }) => (
  <h6 
    className={classes.editstatus} 
    onClick={() => bookingDetailHandler(row.original.brewery_type)} 
    value={row.original.brewery_type}
  >
    {row.original.brewery_type}
  </h6>
);
// 非必选：也可以手动声明displayName，兼容性更好
StatusCell.displayName = 'StatusCell';

const tableHooks = (hooks) => {
  hooks.visibleColumns.push((columns) => [
    ...columns,
    {
      accessor: "status",
      Header: "Status",
      Cell: StatusCell, // 直接传入抽离的具名组件
    },
  ]);
};

方案2：临时跳过校验（仅适合调试场景）

如果不想抽离组件，可以在报错行添加ESLint忽略注释，跳过当前行的react/display-name校验：

const tableHooks = (hooks) => {
  hooks.visibleColumns.push((columns) => [
    ...columns,
    {
      accessor: "status",
      Header: "Status",
      // 添加忽略注释
      Cell: ({ row }) => ( // eslint-disable-line react/display-name
        <h6 className={classes.editstatus} onClick={() => bookingDetailHandler(row.original.brewery_type)} value={row.original.brewery_type} >
          {row.original.brewery_type}
        </h6>
      ),
    },
  ]);
};

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