无法在 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;

我收到类似的错误

类型“JSX.IntrinsicElements”上不存在属性“vaadin-text-field”。

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

Answer 1

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

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

或者可能在文件的顶部