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共享的常见CustomElements ？您？然后问问自己，添加CustomElement包装器是否完全有好处。

如果您要控制 common CustomElements，并且确实要坚持使用它们，那么可以使用Custom DOM Events代替属性。这样，您就不会被迫对您的React道具进行 serialize 序列化，而可以轻松地分发它们。