React Typescript：將表格提取到組件並傳遞其他道具

Question

我想為table 、 td 、 tr等創建自定義組件，以便在一個地方設置它們的樣式。 如何為此指定道具？ 以下代碼是我嘗試實現此目的，但我收到很多錯誤，說道具不可分配給類型。

import React, { ReactNode, FC } from "react";

interface Props {
  children: ReactNode;
}

const Table: FC<Props & HTMLTableElement> = ({ children, ...rest }) => (
  <table {...rest} className="min-w-full divide-y divide-gray-300">
    {children}
  </table>
);

export default Table;

Answer 1

將您的FC<Props & HTMLTableElement>替換為：

const Table: FC<
  Props &
    React.DetailedHTMLProps<
      React.TableHTMLAttributes<HTMLTableElement>,
      HTMLTableElement
    >
> = ({ children, ...rest }) => (
  <table {...rest} className="min-w-full divide-y divide-gray-300">
    {children}
  </table>
);

現在您應該能夠傳遞<table />的所有接受的道具。