带有 React 的可嵌入 JavaScript 小部件

IT技术 javascript widget reactjs
2021-04-22 23:26:44

是否可以使用React JavaScript 库创建可嵌入的 JavaScript 小部件,其中:

  1. React 库“嵌入”在小部件中
  2. 嵌入式 React 库的版本可以与加载小部件的页面上的 React 库不同,就像可以用 jQuery 来完成。

我正在寻找如下所述的功能:

1个回答

对于您提到的要求,最好的解决方案是 browserify(或类似的)。使用reactify转换,您可以一步将 JSX 转换为 JS。Browserify(和 Webpack)在 React 社区中非常常见,所以几乎所有的库都发布到 npm 以便于使用。

Browserify 将您的 JavaScript、您选择的 React 版本和任何库打包到一个 JS 文件中,该文件不使用全局变量或与页面上运行的其他代码冲突的其他模式。

您还可以查看诸如react-css 之类的一些库,以将您的样式与页面样式隔离开来。这些样式也将在您的包中隔离。当然,如果页面执行类似的操作div {margin: 1em},唯一的解决方案是 iframe 或 web 组件。

@SergevandenOever 如果您想要由单个组件限定范围的样式,React 内联样式是一个内置功能,可以满足您的需求:facebook.github.io/react/tips/inline-styles.html请参阅这些幻灯片以获取理由:speakerdeck.com/vjeux/react-css-in-js不确定我是否同意,但这些是一些有趣的想法!而且比在 cleanslate 中添加 !important 更丑陋。
2021-05-27 23:26:44
2021-06-04 23:26:44
听起来你把我需要的所有原料都交给了我!关于样式,我计划使用cleanslate,它自我描述为:一个极端的 CSS 重置样式表,用于积极重置元素及其子元素的样式。完全由 CSS !important 规则组成。
2021-06-21 23:26:44