Question

我正在使用自定义app.do_teardown_appcontext()组件，如下所示：

Icon

但是，<Icon onClick={() => {}} />在TypeScript下划线并给出以下消息，我不太清楚：

Icon

我的Property 'onClick' does not exist on type 'IntrinsicAttributes & Pick<Pick<Props, "className" | "name"> & Partial<Pick<Props, never>>, "className" | "name"> & { theme?: any; } & { as?: "symbol" | "object" | ... 174 more ... | undefined; }'.ts(2322)组件是Icon，如下所示：

styled-component

通过在interface Props { name: string className?: string } const Icon = styled(({name, className, ...props}: Props) => <i className={`material-icons ${className}`} {...props}>{name}</i>)``的接口声明中添加以下内容以允许任何属性，我能够使TypeScript保持沉默：

Icon

但是感觉像是黑客，我想了解这个问题并找到合适的解决方案。

有趣的是，如果我使用自定义[x: string]: any组件的相同方式，则不会收到错误消息：

Button

Answer 1

您对Icon的属性定义告诉打字稿，只有name和className是有效的属性。

interface Props {
  name: string
  className?: string
}

如果您还想允许onClick，则必须添加它：

interface Props {
  name: string;
  className?: string;
  onClick: (e: Event) => void;
}

或者如果您想允许所有对<i>有效的属性，请使用以下命令：

interface Props extends React.HTMLAttributes<HTMLElement> {
  name: string
}

具有样式组件的onClick的打字稿问题

1 个答案: