代码之家 › 专栏 › 技术社区 › Andrey Tsarev

如何使用基本组件分配推断组件道具

typescript reactjs

Andrey Tsarev · 技术社区 · 4 年前

我正在尝试创建一个组件库,并希望利用 as react-bootstrap )。但是,我正在努力使用TypeScript,我不知道如何让它推断所选属性的正确类型。我想让内在的元素也起作用。


import React from "react";

export type AsProp<As extends React.ElementType> = {
  as?: As
} & React.ComponentPropsWithoutRef<As>;

type TestProps<As extends React.ElementType = 'div'> = AsProp<As> & {
  active: boolean
}

export const TestComponent: React.FC<TestProps> = props => {
  const {as: Component = 'div', ...rest} = props;

  return <Component {...rest} />;
}

export const UsageComponent = () => {
  return <TestComponent as='a' href='asd' active/>;
}

似乎我的代码没有推断出 像

TS2322: Type '"a"' is not assignable to type '"div" | undefined'.

我如何修复它,使其正确推断,而不是强迫我使用默认类型?

1 回复 | 直到 4 年前

Alex Wayne 4 年前

执行此操作时:

export const TestComponent: React.FC<TestProps> = props => {

你申报 TestProps 没有其泛型参数,因此默认 'div' 使用。所以要让这一切顺利进行 TestComponent

type TestProps<As extends React.ElementType> = AsProp<As> & {
  active: boolean
}

export function TestComponent<
  As extends React.ElementType = 'div'
>(props: TestProps<As>) {
  const {as: Component = 'div', ...rest} = props;
  return <Component {...rest} />;
}

Playground