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

Question

I am working on a big angular project and want to use some react components, but since react components can't be used in angular in a proper way, I wonder if I can transpile the react component to a web component and then include the web component in my angular project.

Answer 1

Solution (from Rect DOCS )

Encapsulate React in aw eb component , then use the web component in your Angular app. This should fullfill both your requirement:

• you do not need to rewrite the parent Angular app
• you do not need to rewrite the child React components

Example:

    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

If you rewrite the react component into a Native Web component without using any frameworks then you can use it in React and Angular and Vue and anything else.

If/When your company wants to move to a different framework then a native component written in raw JavaScript will still function.

Answer 3

We can include the React component using <script> tag. Please follow the below guide provided in React JS docs.

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