如何在 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,它是区分大小写的。注意:itemScope
和itemType
的拼写
<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 文件?