如何在 React+Typescript 中使用微數據？

Question

當我將itemscope itemtype="http://schema.org/Product"添加到h1 ，出現此錯誤：

輸入'{孩子：字符串； 項目范圍：真； 項目類型：字符串； }' 不能分配給類型 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'。 類型“DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>”上不存在屬性“itemscope”

<h1 itemscope itemtype="http://schema.org/Product">Amasia</h1>

如何在 React+Typescript 中使用微數據？

Answer 1

不是很優雅，但這有效：

// foo.d.ts
declare namespace React {
    interface HTMLAttributes<T> {
        itemscope?: boolean;
        itemtype?: string;
    }
}
// app.tsx
function foo(): JSX.Element {
    return (
        <h1 itemscope itemtype="http://schema.org/Product">
            Amasia
        </h1>
    );
}

對我有用（Typescript 3.4.5）。

Answer 2

對於 React，它區分大小寫。 注意： itemScope和itemType拼寫

<div itemScope itemType={"http://schema.org/Product"}>{...}</div>

Answer 3

如果你使用打字稿，你應該這樣寫

<h1 itemScope itemType={"http://schema.org/Product"}>{...}</h1>