I am planning to use some stencil components inside a React App using the 0.0.0-experimental version, so I can use my components with <kebab-case>
. I am rather new to typescript and would like to understand how I can add stencils auto-generated IntrinsicElements to my React IntrinsicElements. What I do right now inside my React component is:
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>);
}
It works, but it feels like it's not the right way. Can you point me to some documentation or other helpful resources? https://stenciljs.com/docs/typed-components tells me I can do it, but it doesn't tell me how.
You have to add you components in InstrictElements
interface like following:
// 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;
}
}
}
Then in your react components, you can do use like other native HTML Elements:
export function ReactComp(props: any) {
return (
<>
<my-stencil-comp myProp={10} />
</>
);
};
Using the declaration merging feature of TypeScript, the IntrinsicElement
interface defined by @types/react
and your d.ts
file would be merged into a single interface.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.