4

我正在尝试在 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?

4

1 回答 1

6

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

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

或者可能在文件的顶部

于 2021-09-01T06:54:58.697 回答