在React和Angular中同时使用一个组件

Question

我们目前正在维护多个具有相同导航栏实现的项目。这些项目的不同之处在于它们所构建的JS库(即React、Angular和Angular JS)。我只是想知道是否有办法在这些项目中创建一个可共享的组件(例如，可能是NPM包?)，这样维护起来会更容易，对组件的更改将在所有页面上生效。

Answer 1

您为我们的案例提供了一个最小的上下文。我能说什么呢?

1. 你可以为共享组件选择一个堆栈——react或angular。并在所有项目中使用它。React可以提供一个div元素，它可以用来挂载angular的共享组件，angular应用也可以为React的共享组件做同样的事情。

2. 你可以通过WebComponents栈来编写共享组件。这些部件将按照我们的设计系统进行设计。但是它需要创建2个包装器:一个用于react，一个用于angular.

// monorep/webcomponents
class CommonComponent extends HTMLElement {}

// monorep/react-components
const CommonComponentReact (props) => {
// react specific logic
return <common-component attr and props />
}
// monorep/angular-components
// angular the same as react

所以你可以为基础(共享)组件选择任何堆栈，而不是webcomponents。你所需要做的就是为外部堆栈创建包装器