0

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

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

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

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

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

4

1 回答 1

0

React 不是一种与 CustomElements 一起使用的技术，因此 WebComponents 不能很好地发挥作用。

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

CustomElements 是一个内置于所有现代浏览器中的标准，并且与技术无关——React 有一个自己的组件模型，它依赖于添加的运行时，并不意味着其他框架技术可以轻松访问。大量使用 React 通常意味着框架锁定，并且有与之相关的成本。

谁在控制你想与 React 共享的通用 CustomElements ？你？然后问问自己，添加 CustomElement 包装器是否有好处。

如果您正在控制常见的CustomElements 并且确实想坚持使用它们，那么使用属性的替代方法是Custom DOM Events。这样你就不会被迫序列化你的 React props，而是可以很容易地分发它们。

于 2019-10-28T00:50:51.000 回答