如何在 React+Typescript 中使用微数据？答案

【问题标题】：How to use Microdata in React+Typescript?如何在 React+Typescript 中使用微数据？
【发布时间】：2019-10-23 16:37:39
【问题描述】：

当我将itemscope itemtype="http://schema.org/Product" 添加到h1 时，我收到此错误：

类型'{孩子：字符串;项目范围：真；项目类型：字符串； }' 不是可分配给类型 'DetailedHTMLProps, HTMLHeadingElement>'。类型上不存在属性“itemscope” 'DetailedHTMLProps, HTMLHeadingElement>'

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

如何在 React+Typescript 中使用微数据？

【问题讨论】：

React itself supports this, as of version 16。看来问题在于 TypeScript 定义。

标签： reactjs typescript microdata

【解决方案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）。

【讨论】：

【解决方案2】：

如果你使用打字稿，你应该这样写

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

【讨论】：

【解决方案3】：

对于 React，它是区分大小写的。注意：itemScope和itemType的拼写

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

【讨论】：