具有反应的嵌入式JavaScript小部件 [英] Embeddable JavaScript widget with react

问题描述

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

Is it possible to create an embeddable JavaScript widget using the React JavaScript library, where:

1. React库嵌入在小部件中


2. 嵌入式React库的版本可能不同从加载小部件的页面上的React库，就像可以使用jQuery一样。

我正在寻找功能，如：

• http://blog.swirrl.com/articles/creating-asynchronous-embeddable-javascript-widgets/


• http://shootitlive.com/2012/07/developing-an-embeddable-javascript-widget/

• http://blog.swirrl.com/articles/creating-asynchronous-embeddable-javascript-widgets/
• http://shootitlive.com/2012/07/developing-an-embeddable-javascript-widget/

推荐答案

根据您的要求最好的解决方案是browserify（或类似的）。使用 remtify 转换，您可以让JSX到JS一步到位。 Browserify（和Webpack）是反应社区非常常见的，因此几乎所有库都发布到npm以方便消费。

For the requirements you mentioned, the best solution is browserify (or similar). Using reactify transform you can have the JSX to JS happen all in one step. Browserify (and Webpack) are very common the react community, so nearly all libraries are published to npm for easy consumption.

Browserify包装你的JavaScript，你选择的React版本，和任何库成一个JS文件，不使用全局或其他模式与页面上运行的其他代码冲突。

Browserify packs your JavaScript, your React version of choice, and any libraries into a single JS file which doesn't use globals or other patterns that conflict with other code running on the page.

您还可以查看一些类似的库 react-css 将您的样式与页面样式隔离开来。样式也将在您的包中隔离。当然，如果页面的行为类似于 div {margin：1em} ，那么唯一的解决方案就是iframe或web-components。

You can also look into some libs like react-css to isolate your styles from the page styles. The styles will also be isolated in your bundle. Of course if the page does something like div {margin: 1em}, the only solutions are iframes or web-components.

这篇关于具有反应的嵌入式JavaScript小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！