- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在处理一个使用 React 和 Typescript 的项目,但我想开始在我的项目中使用原生 Web 组件以逐步淘汰我的一些 React 组件。
当我尝试在我的某些 JSX 中使用 person-info
组件时出现此错误。
Property does not exist on type 'JSX.IntrinsicElements'
我查看了其他一些存在这些问题的问题,但它们似乎都与 native Web 组件无关。
当我在我的项目中使用我的网络组件时,如何让 Typescript 和 React 很好地发挥作用?
个人信息.mjs
const css = `
<style>
:host([hidden]) { display: none; }
:host {
align-items: center;
display: grid;
font-weight: normal;
grid-gap: var(--spacing-size-a) var(--spacing-size-a);
grid-template-areas:
'picture heading'
'picture sub-heading';
grid-template-columns: auto 1fr;
justify-items: start;
}
div {
grid-area: picture;
}
h1, h2 {
margin: 0;
padding: 0;
}
h1 {
align-self: end;
font-size: var(--l-text-size);
font-weight: normal;
grid-area: heading;
text-transform: capitalize;
}
h2 {
align-self: start;
font-size: var(--m-text-size);
grid-area: sub-heading;
}
ion-icon {
font-size: 56px;
}
</style>
`
const html = `
<div>
<ion-icon name="md-contact"></ion-icon>
</div>
<h1>Heading</h1>
<h2>Sub-heading</h2>
`
class PersonInfo extends HTMLElement {
static get observedAttributes () {
return [
'heading',
'subHeading',
'size'
]
}
constructor () {
super()
this.attachShadow({mode: 'open'})
this.shadowRoot.appendChild(template.content.cloneNode(true))
}
connectedCallback () {
this.shadowRoot.querySelector('h1').innerText = this.getAttribute('heading')
this.shadowRoot.querySelector('h2').innerText = this.getAttribute('subHeading')
}
get heading () {
return this.getAttribute('heading')
}
set heading (newValue) {
this.setAttribute('heading', newValue)
this.shadowRoot.querySelector('h1').innerText = newValue
}
get subHeading () {
return this.getAttribute('subHeading')
}
set subHeading (newValue) {
this.setAttribute('subHeading', newValue)
this.shadowRoot.querySelector('h2').innerText = newValue
}
get size () {
return this.getAttribute('size')
}
set size (newValue) {
this.setAttribute('size', newValue)
}
}
const template = document.createElement('template')
template.innerHTML = `${css}${html}`
window.customElements.define('person-info', PersonInfo)
导入语句
import '../../common/WebComponents/PersonInfo.mjs'
在 JSX 中的使用
<main>
<person-info
heading='Bruce Wayne'
subHeading="I'M BATMAN!"
/>
</main>
最佳答案
去了之后想通了here如何消除此特定错误。
import * as React from 'react'
declare global {
namespace JSX {
interface IntrinsicElements {
'person-info': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
}
}
}
但是,由于我在组件上使用的自定义属性,此后我又遇到了另一个错误。感谢 Shanon 的评论,我也想出了如何解决这个问题,并最终得到了我刚刚导入到我的 App.tsx
文件中的最终代码。
import * as React from 'react'
declare global {
namespace JSX {
interface IntrinsicElements {
'person-info': PersonInfoProps
}
}
}
interface PersonInfoProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
heading: string,
subHeading: string,
size?: string
}
关于javascript - Typescript 错误 "Property does not exist on type ' JSX.IntrinsicElements'"使用 native Web 组件时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55424417/
为什么我可以通过 JSX.IntrinsicElements['div'] & X 创建一个新类型但我不能延长它? 我不明白错误信息——我不是简单地添加了一个“可选类型”吗?扩展类型这两种不同的方式有
我有一个运行 Express 服务器的 Node 项目,当在 URL 中查询带有 /amp 的新闻文章时,返回该文章的 AMP 版本。 应客户要求,这些 AMP 文章使用 React 组件构建,最终呈
我想创建一个 TypeScript 类型来保证 React FunctionComponent最终只渲染一个 HTML 元素。也就是说,它不能是 string , number , ReactFrag
我正在尝试在服务器端使用 JSX,而不使用 React。我正在关注有关 JSX 的 typescript 文档 here , 并在 .tsx 中写下以下内容文件。 declare namespace
我正在尝试在服务器端使用 JSX,而不使用 React。我正在关注有关 JSX 的 typescript 文档 here , 并在 .tsx 中写下以下内容文件。 declare namespace
我将容器转换为 .jsx 文件,但现在在渲染方法中我的 HTML 元素上出现以下错误: Property does not exist on type 'JSX.IntrinsicElements.d
突然之间,我的 React TypeScript 项目开始拒绝 标记为 TS2339: Property does not exist on type 'JSX.IntrinsicElements'
我正在使用 typescript 编写 redux 应用程序。 var item = React.createClass({ render: function() { return (he
我正在处理一个使用 React 和 Typescript 的项目,但我想开始在我的项目中使用原生 Web 组件以逐步淘汰我的一些 React 组件。 当我尝试在我的某些 JSX 中使用 person-
我是一名优秀的程序员,十分优秀!