我正在使用React和Typescript开发一个项目,但我想开始在我的项目中使用本地Web组件,逐步淘汰我的一些React组件。
当我尝试在某些JSX中包含
当我尝试在某些JSX中包含
person-info
组件时,我收到了这个错误。Property does not exist on type 'JSX.IntrinsicElements'
我看了一些其他有这些问题的问题,但是似乎都与本地Web组件无关。
当我在项目中使用我的Web组件时,如何使Typescript和React可以很好地配合?
PersonInfo.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>