在React组件中创建共享的自定义元素

Question

我正在采用将React组件包装到Custom Elements中的方法，但是我觉得它是过度设计的，我看不到真正的好处。我的代码看起来像这样：

<core-app>
    <core-login></core-login>
</core-app>

是自定义元素是一个呈现React组件的自定义元素，该组件还包含一些子组件的混合，例如共享UI组件库和其他React组件的本机“自定义元素”部分。

问题是，我正在努力使React组件将道具和事件传递给自定义元素，我通过“字符串化” JSON数据设法将道具解析为HTML属性。

我担心的是；所有这些额外的复杂性是否会增加任何价值？如果Custom Elements实际上是React组件，我会更好吗？如何在React组件中轻松共享常见的自定义元素？

Answer 1

React不是与CustomElements以及WebComponents very well一起使用的技术。

您应该问自己，为什么要这样做。如果您仅具有React组件，仅将其转换为CustomElements不会给您带来太多好处（尽管由于更大的捆绑包大小，它免费提供了运行时可组合性）。您可以在“更大”（功能）React组件之间轻松共享（子代/ UI）React组件。

CustomElements是内置在所有现代浏览器中的standard，并且与技术无关-React具有自己的组件模型，该组件模型依赖于添加的runtime，并且并不意味着其他框架技术都可以轻松访问。大量使用React通常意味着要锁定框架，并为此付出一些代价。

谁在控制您要与React共享的common CustomElements？您？然后问问自己，添加CustomElement包装器是否完全有好处。

如果您正在控制common CustomElements，并且do want坚持使用它们，那么使用属性的替代方法是Custom DOM Events。这样，您就不会被迫serialize您的React道具，而可以很容易地分发它们。