如何创建具有 HTMLAttributes 作为道具的组件

Posted 2023-02-16

【中文标题】如何创建具有 HTMLAttributes 作为道具的组件

【英文标题】：How to create component that has HTMLAttributes as props

【发布时间】：2017-11-18 20:59:59

【问题描述】：

我正在使用 Typescript 和 Preact。我想创建一个组件来公开<span/> 可以拥有的所有道具：

import  h, Component  from "preact";

export class MySpan extends Component<any, void> 
    render(props) 
        return <span ...props></span>;

    

但是，上面的示例使用了any，这并不是真正的类型安全。相反，我想公开span 拥有的属性。

【参考方案1】：

在反应中我会这样做：

export class MySpan extends React.Component<React.htmlProps<HTMLDivElement>, void>

    public render()
    
        return <span ...this.props/>;
    

我对@9​​87654323@ 没有实际经验，但考虑到他们的preact.d.ts，它应该类似于：

import  h, Component  from "preact";

export class MySpan extends Component<JSX.HTMLAttributes, void> 
    render(props) 
        return <span ...props></span>;

    

请注意，这不是 span 元素的特定属性，而是通用属性。

【讨论】：

你可以试试这个：Component