reactjs - tạo tên component động trong react với typescript 3.2.2

Tôi đã nâng cấp lên TypeScript 3.2.2 và đoạn mã này trước đây biên dịch được thì giờ không còn biên dịch được nữa:

export const Heading: React.SFC<HeadingProps> = ({ level, className, tabIndex, children, ...rest }) => {
  const Tag = `h${level}`;

  return (
    <Tag className={cs(className)} {...rest} tabIndex={tabIndex}>
      {children}
    </Tag>
  );
};

Với lỗi:

Thuộc tính 'tabIndex' không tồn tại trên kiểu 'IntrinsicAttributes'.

Câu trả lời #1

Điều này hơi muộn và được thử nghiệm trên TypeScript 3.4:

Thay thế

const Tag = `h${level}`;

với

const Tag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

Tôi vẫn chưa chắc về tabIndex, nhưng bây giờ TypeScript có thể suy luận các thuộc tính khác như children.

Câu trả lời #2

Điều này hơi dài dòng, nhưng tôi đã có thể khiến mọi thứ biên dịch một cách gọn gàng với đầy đủ kiểu dữ liệu bằng cách làm theo cách này:

const H = (
  props: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
  >
): JSX.Element => React.createElement("h" + this.props.size, props);

Sau đó bạn có thể sử dụng <H> trong thành phần của bạn và sử dụng thuộc tính size để xác định thẻ tiêu đề nào sẽ được sử dụng.