如何在React中使用Web组件

这篇文章介绍了如何在React的最新实验性分支中使用Web Components。要在旧版本中使用Web Components，请阅读这里。

React直到最近才完全支持Web组件，特别是自定义元素。然而，React最近增加了对Web组件的实验性支持，使React应用程序能够使用它们，而不需要特殊的垫片来兼容。这对于组件库、设计系统和微前端的使用情况来说是非常好的。

网络组件为网络提供了一个通用和可重复使用的UI组件模型。Web组件由一些独立的技术组成，如自定义元素、阴影DOM和HTML模板。结合起来，我们可以创建和部署可以在任何JavaScript框架中工作的组件。

网络组件主要是通过属性和自定义事件进行通信。属性可以被设置为将数据传入组件，而自定义事件可以让组件将数据传回给主机应用程序。

使用React的最新实验分支，让我们看看React应用程序中的一个简单的警报Web组件。

在我们的例子中，我们有一个简单的警报Web组件。这个组件有一个status 属性用于不同的状态，还有一个closable 属性用于设置警报是否应该显示一个关闭按钮。

为了使用我们的警报Web组件，我们导入组件文件并将标签添加到我们的React组件：

import React, { useState }  from 'react';
import './alert.js';

export default function App() {
  return (
    <div>
      <x-alert>
        This is a Web Component in React
      </x-alert>
    </div>
  );
}

现在我们可以开始设置属性和配置我们的警报：

import React, { useState }  from 'react';
import './alert.js';

export default function App() {
  return (
    <div>
      <x-alert status={'success'} closable>
        This is a Web Component in React
      </x-alert>
    </div>
  );
}

大多数Web组件允许JavaScript属性和HTML Attributes来传递数据。HTML属性仅限于字符串类型，但可以进行转换。为了保持一致性，在可能的情况下，我通常喜欢设置属性而不是属性。

Web组件还可以发射CustomEvent 事件类型，以通知我们的应用程序的变化。例如，当用户点击关闭按钮时，警报将提供一个closeChange 事件。要监听事件，在事件名称前加上on 。注意事件的大写字母保持不变。例如，自定义事件closeChange 在你的JSX中变成oncloseChange 。

import React, { useState }  from 'react';
import './alert.js';

export default function App() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <button onClick={() => setShow(!show)}>toggle alert</button>

      <x-alert hidden={show} status="success" closable oncloseChange={() => setShow(!show)}>
        This is a Web Component in React
      </x-alert>
    </div>
  );
}

现在我们可以从我们的Web组件中监听事件，并像我们应用程序中的其他组件一样设置状态。请看下面的完整工作演示，了解警报组件的细节