Question

我正在做一个大的有角项目，想使用一些React组件，但是由于无法以正确的方式按角度使用React组件，所以我想知道是否可以将React组件转换为Web组件，然后将Web组件包含在我的角度项目中。

Answer 1

解决方案（来自Rect DOCS）

将 React 封装在w eb组件中，然后在 Angular 应用中使用Web组件。这应该满足您的两个要求：

您不需要重写父Angular应用
您不需要重写子React组件

示例：

    class XSearch extends HTMLElement {
      connectedCallback() {
        const mountPoint = document.createElement('span');
        this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

        const name = this.getAttribute('name');
        const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
        ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
      }
    }
    customElements.define('x-search', XSearch);

Answer 2

如果在不使用任何框架的情况下将react组件重写为Native Web组件，则可以在React和Angular和Vue以及其他任何版本中使用它。

如果/当您的公司想要转移到其他框架时，用原始JavaScript编写的本机组件仍将起作用。

Answer 3

我们可以使用$this->validate($request, [ 'name' => 'required', 'content' => 'required', 'excerpt' => 'required', 'type' => 'required', 'slug' => 'required|unique:providers,slug,'.$providerId ]);标签添加React组件。请遵循React JS文档中提供的以下指南。

https://reactjs.org/docs/add-react-to-a-website.html

我可以将React组件转换为Web组件吗？

3 个答案:

示例：