如何将模板的内在元素添加到反应的内在元素

Question

我计划在使用0.0.0实验版本的React应用程序中使用一些模板组件，所以我可以使用我的组件与<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;
}
}
}

然后在react组件中，你可以像使用其他原生HTML元素一样使用:

export function ReactComp(props: any) {
return (
<>
<my-stencil-comp myProp={10} />
</>
);
};

使用TypeScript的声明合并功能，@types/react定义的IntrinsicElement接口和你的d.ts文件将合并成一个接口。