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

时间:2017-06-16 07:21:35

标签: reactjs typescript preact

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

import { h, Component } from "preact";

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

    }
}

但是,上面的示例使用any,这实际上并不是类型安全的。相反,我想要公开属性span

1 个答案:

答案 0 :(得分:1)

在反应中我会这样做:

export class MySpan extends React.Component<React.HTMLProps<HTMLDivElement>, void>
{
    public render()
    {
        return <span {...this.props}/>;
    }
}

我没有preact的实际经验,但考虑到他们的preact.d.ts,它应该类似于:

import { h, Component } from "preact";

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

    }
}

请注意,这不是span元素的特定属性,而是泛型属性。