在 React 和 Angular 上使用一个组件

Question

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

Answer 1

您为我们的案例提供了最低限度的背景信息。我能说什么？

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

2. 您可以通过 WebComponents 堆栈编写共享组件。这些组件将遵循我们的设计系统。但它需要创建 2 个包装器：1 个用于反应，用于角度。

// 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

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