如何使用 React 构建 Custom Elements 应用-FunTeaLearn Online Web Tutorials

React 自 0.14 版本开始，开始支持将代码编译为自定义元素，也就是 Web Components。Custom Elements 是 Web Components 标准的核心，通过使用 Custom Elements，我们可以自定义组件的标签名和属性，使得组件可以像原生 HTML 元素一样被使用和处理。本文将介绍如何使用 React 编写 Custom Elements 应用。

什么是 Custom Elements？

Custom Elements 是 Web Components 标准的核心，它允许您创建定制的 HTML 元素。这些元素可以拥有自己的样式、行为和属性，并且可供其他 Web 应用程序或网站使用。

使用 Custom Elements 可以提高开发效率、简化代码、提高组件复用性。

React 支持 Custom Elements

React 从 0.14 版本开始支持将代码编译为自定义元素。除了官方支持，也有第三方库支持，如react-custom-element。

如何创建 Custom Elements？

定义 Custom Elements 标签名和属性

在创建 Custom Elements 之前，您需要定义组件的标签名和属性，这里我们以 React 组件为例，定义一个 MyCustomElement 的组件，并加上 x- 前缀自定义标签名。

-- -------------------- ---- -------
------ ------ - --------- - ---- --------

----- --------------- ------- --------- -
  -------- -
    ------ -
      ---------- ------------------------
    --
  -
-

------------------------- - -
  ----- ---------------------------------
-

------ ------- ----------------

自定义元素注册

注册组件为 Custom Elements，可以使用 document.registerElement() 方法进行注册。但是在 React 16 和 React 17 版本中，这个方法是不安全的，已被废弃，我们需要使用 window.customElements.define() 方法来注册。

-- -------------------- ---- -------
------ ------ - --------- - ---- --------

----- --------------- ------- --------- -
  ------------- -
    --------

    -- -- ---- ------ ---
    ----- ---------- - ------------------- ----- ------ ---

    -- -- ----
    ----------------------------- --- ------------
  -

  -------- -
    ------ -
      ---------- ------------------------
    --
  -
-

------------------------- - -
  ----- ---------------------------------
-

--------------------------------------------------- -----------------

函数中，我们首先在 constructor 中，使用 this.attachShadow({ mode: 'open' }) 方法来创建一个 hook 在当前元素的 Shadow DOM。然后在 render 函数中，使用 React.render() 方法将组件渲染在这个 Shadow DOM 中。

最后，在最后一行中，使用 window.customElements.define() 定义 Custom Element。您需要向方法提供元素名称和 Component 类。

使用 Custom Elements

使用 Custom Elements 很简单，只需像使用原生 HTML 元素一样使用定义好的标签即可。

-- -------------------- ---- -------
--------- -----
------
  ------
    ------------- ----------------
  -------
  ------
    -------------------- -----------------------------------
  -------
-------

示例代码

-- -------------------- ---- -------
------ ------ - --------- - ---- --------

----- --------------- ------- --------- -
  ------------- -
    --------

    -- -- ---- ------ ---
    ----- ---------- - ------------------- ----- ------ ---

    -- -- ----
    ----------------------------- --- ------------
  -

  -------- -
    ------ -
      ---------- ------------------------
    --
  -
-

------------------------- - -
  ----- ---------------------------------
-

--------------------------------------------------- -----------------

-- -- ------ --------
-------------------- -----------------------------------

结语

通过本文，您了解了如何使用 React 构建 Custom Elements 应用，并可以从中获得更高的代码复用性、可维护性和可扩展性。您可以使用本文提供的步骤详细指导，尝试自己编写 Custom Elements，并加速 Web 开发进度。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/679721a5504e4ea9bde28caf

如何使用 React 构建 Custom Elements 应用