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

Posted

技术标签:

【中文标题】如何在 React+Typescript 中使用微数据?【英文标题】:How to use Microdata in 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 itself supports this, as of version 16。看来问题在于 TypeScript 定义。 【参考方案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,它是区分大小写的。注意:itemScopeitemType的拼写

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

【讨论】:

以上是关于如何在 React+Typescript 中使用微数据?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React.js Typescript 版本中使用不支持 typescript 的 javascript 包

如何在 TypeScript 中使用带有 React 无状态功能组件的子组件?

如何使用 Typescript 在 React 中扩展 HTML 属性

React-native:如何在 React-native 中使用(和翻译)带有 jsx 的 typescript .tsx 文件?

你如何在带有 Typescript 的 create-react-app 中使用 Mocha?

在react typescript项目中如何使用没有@type定义的npm包