如何將模板的 IntrinsicElements 添加到 React 的 IntrinsicElements

Question

我計划使用 0.0.0-experimental 版本在 React App 中使用一些模板組件，這樣我就可以將我的組件與<kebab-case>一起使用。 我是 typescript 的新手，想了解如何將模板自動生成的 IntrinsicElements 添加到我的 React IntrinsicElements。 我現在在我的 React 組件中所做的是：

import React from "react";
import { JSX as stencils } from "stencil-project/dist/types/components"; // (I am using a yarn mono-repo)
import { defineCustomElements } from 'stencil-project/dist/esm/loader';

defineCustomElements();


declare global { 
    namespace JSX { 
        interface IntrinsicElements extends stencils.IntrinsicElements {} 
    } 
};

export const App = () => {
    return (<my-component></my-component>);
}

它有效，但感覺它不是正確的方法。 你能給我指點一些文檔或其他有用的資源嗎？ https://stenciljs.com/docs/typed-components告訴我我可以做到，但沒有告訴我怎么做。

Answer 1

您必須在InstrictElements界面中添加組件，如下所示：

// Some global.d.ts file.
// Importing React namespace is important
import React from 'react';

interface MyStencilComponentProp {
  myProp: number;
}

declare global {
  namespace JSX {

    interface IntrinsicElements {
      'my-stencil-comp': MyStencilComponentProp;
    }
  }
}

然后在你的反應組件中，你可以像其他原生 HTML 元素一樣使用：

export function ReactComp(props: any) {

  return (
    <>
      <my-stencil-comp myProp={10} />
    </>
  );
};

使用 TypeScript 的聲明合並功能， @types/react定義的IntrinsicElement接口和您的d.ts文件將合並為一個接口。