无法在 React 中使用 Web 组件

Question

我正在尝试在 React 应用程序中使用一些 Web 组件。但是，React 无法检测 Web 组件标签。

import React from "react";
import "./App.css";
import "@vaadin/vaadin-button";
import "@vaadin/vaadin-text-field";

function App() {
  return (
    <div className="App">
      <vaadin-text-field label="First Name" ref="firstName" />
      <vaadin-text-field label="Last Name" ref="lastName" />
      <vaadin-button ref="addButton"> Add </vaadin-button>
    </div>
  );
}

export default App;

我收到类似

的错误

Property 'vaadin-text-field' does not exist on type 'JSX.IntrinsicElements'.

我需要使用 Reactify-WC 才能在 React 中使用 WebComponents 吗？

Answer 1

假设这是一个 Typescript 编译错误。您需要将打字稿声明添加到您的反应应用-env.d.ts

declare namespace JSX {
    interface IntrinsicElements {
        'vaadin-text-field': { 'prop': any };
        'vaadin-button d': { 'prop': any };
    }
}

或者可能在文件的顶部

无法在 React 中使用 Web 组件

Unable to use Web Components in React

reactjs

typescript

vaadin

web-component

lit