时间戳

首页 > 解决方案 > 打字稿推断道具不适用于内在元素

reactjs - 打字稿推断道具不适用于内在元素

问题描述

我有一个组件，它需要一个as道具，应该从中推断出剩余的道具类型：

import React from 'react';
import s from './index.module.scss';

export type LayoutProps<As extends React.ComponentType<any> | keyof JSX.IntrinsicElements> = {
  as: As;
} & React.ComponentProps<As>;

export function Layout<As extends React.ComponentType<any> | keyof JSX.IntrinsicElements>({
  as: Component = 'div',
  children,
  className = '',
  ...props
}: LayoutProps<As>) {
  return (
    <Component className={`${s.layout} ${className}`} {...props}>
      {children}
    </Component>
  );
}

这适用于标准 React 组件，例如以下会抛出错误Type 'number' is not assignable to type 'string | undefined'：

import React from 'react';
import { Link } from 'react-router-dom';
const Example = () => <Layout as={Link} title={5}>Hello</Layout>;

然而，当它实际上应该抛出相同的错误时，这会起作用：

import React from 'react';
const Example = () => <Layout as="a" title={5}>Hello</Layout>;

我究竟做错了什么？

提前致谢！

标签： reactjstypescript

解决方案

推荐阅读