带有 React 的可嵌入 JavaScript 小部件

Embeddable JavaScript widget with React(带有 React 的可嵌入 JavaScript 小部件)
本文介绍了带有 React 的可嵌入 JavaScript 小部件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

  1. React 库嵌入"在小部件中
  2. 嵌入的 React 库的版本可以与加载小部件的页面上的 React 库不同,就像可以使用 jQuery 一样.

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

I'm lookin for functionality as described in:

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

推荐答案

对于你提到的需求,最好的解决方案是browserify(或类似的).使用 reactify 转换,您可以让 JSX 到 JS 一步完成.Browserify(和 Webpack)在 React 社区中非常常见,因此几乎所有库都发布到 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.

这篇关于带有 React 的可嵌入 JavaScript 小部件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)