我应该将StencilJS与ReactJS一起使用吗？

Posted 2023-02-17

这些是我所面临的问题：

1. 集成：我尝试按照Stencil官方网站上的说明集成Stencil和React。原来，我必须先构建Stencil组件，然后才能将其添加到我的应用程序中，并且需要将其复制到node_modules上，否则它将在Polyfills文件中引发一些错误。
2. 我无法将函数或对象作为prop从我的React App传递到Stencil组件
3. 关于设置与模板反应没有任何示例

有人可以帮我吗？

答案

开箱即用，React在与自定义元素（例如Stencil组件）集成时遇到问题-您可以在https://custom-elements-everywhere.com/处查看更多详细信息以及一些解决方法。

为了帮助进行这种集成，可以使用React的绑定层扩展模板组件，该绑定层将自定义元素转换为可使用的React组件。详细信息请参见此处：https://github.com/ionic-team/stencil-ds-plugins#react

另一答案

我个人使用我自己的github实例，在其中我将带有​​dist和loader文件夹的整个Web组件项目上载到github。之后，您可以使用此命令将项目加载到React应用程序的npm-modules中。它的工作原理类似于您的github存储库中的npm install。

git+https://my-github-instance/web-components/my-components.git

这里有一些细节，如果您有问题可以运行它。

How to install an npm package from GitHub directly?

比起您只能进行npm update / npm install来获得React应用程序中Web组件的最新版本。

Stencil的文档非常详细地介绍了如何在React中使用Web组件：

https://stenciljs.com/docs/react

祝你好运