简体繁体 English

如何通过 JavaScript UMD 加载 React 组件？

[英]How do I load a React component through a JavaScript UMD?

原文 2018-05-03 12:35:15 1 1 javascript/ reactjs

I am trying to use the following external component in my React project.我正在尝试在我的 React 项目中使用以下外部组件。 My project is not based directly on the npm ecosystem (I am using react-dom), so I have been trying to import the component using a static compiled JavaScript file with a regular script tag in my html.我的项目不是直接基于 npm 生态系统（我使用的是 react-dom），所以我一直在尝试使用静态编译的 JavaScript 文件导入组件，在我的 html 中带有常规脚本标记。

The file generated by the build seems to be a JavaScript UMD.构建生成的文件似乎是 JavaScript UMD。 I have tried to load this module using RequireJS, but I have been having the problem described here .我曾尝试使用 RequireJS 加载此模块，但我遇到了此处描述的问题。

I'm not really sure whether I am approaching this correctly.我不确定我是否正确地处理了这个问题。 I know that Browserfy performs similar functions to RequireJS, but I'm not even certain whether I should be pursuing this as a possible avenue.我知道 Browserfy 执行与 RequireJS 类似的功能，但我什至不确定我是否应该将其作为可能的途径。

What is the canonical way to load a component like this into the browser?将这样的组件加载到浏览器中的规范方法是什么？

This question may be a duplicate of this similar question , but it does not have any real answers.这个问题可能是这个类似问题的重复，但它没有任何真正的答案。

1 个解决方案

For reference, I found that this can be done using existing libraries, such as https://github.com/revolunet/react-umd-loader .作为参考，我发现这可以使用现有的库来完成，例如https://github.com/revolunet/react-umd-loader 。 Even if the libraries themselves are somewhat deprecated, the techniques used are still relevant.即使库本身有些过时，所使用的技术仍然是相关的。

如何在使用 Vue 3 UMD 构建的 HTML 单个文件中使用 Vue 2 组件 - How do I use a Vue 2 component in a HTML single file that uses Vue 3 UMD build

我如何有条件地加载我的React组件？ - How do i load my React component conditionally?

如何重新加载反应组件？ - How do I re-load a react component?

捆绑为 UMD 的 React 组件在通过另一个 React 应用程序中的脚本标签导入时无法加载依赖项 - React component bundled as an UMD can't load a dependency when imported via script tag in another react app

Javascript：如何在全局范围内使用 React 组件？ - Javascript: How do I use React component globally?

我该如何更换<img>在 react/javascript 中使用自定义图像组件 - How do I replace <img> with a custom image component in react/javascript

如何处理浏览器中依赖的ESM依赖（不带UMD）？ - How do I handle ESM dependencies of dependencies in the browser (without UMD)?

如何通过 for 循环在 React class 组件中创建对象数组以映射到功能组件中？ - How do I create an array of objects in a React class component through a for loop to be mapped in a functional component?

如何加载通过JavaScript对象调用的JavaScript文件的功能 - How do I load the functions of a JavaScript File called through a JavaScript Object

如何在我的 React 组件中通过 onclick 在另一个 function 中调用一个 function？ - How do I call a function inside another function through onclick in my React component?

暂无

暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在使用 Vue 3 UMD 构建的 HTML 单个文件中使用 Vue 2 组件 - How do I use a Vue 2 component in a HTML single file that uses Vue 3 UMD build 我如何有条件地加载我的React组件？ - How do i load my React component conditionally? 如何重新加载反应组件？ - How do I re-load a react component? 捆绑为 UMD 的 React 组件在通过另一个 React 应用程序中的脚本标签导入时无法加载依赖项 - React component bundled as an UMD can't load a dependency when imported via script tag in another react app Javascript：如何在全局范围内使用 React 组件？ - Javascript: How do I use React component globally? 我该如何更换<img>在 react/javascript 中使用自定义图像组件 - How do I replace <img> with a custom image component in react/javascript 如何处理浏览器中依赖的ESM依赖（不带UMD）？ - How do I handle ESM dependencies of dependencies in the browser (without UMD)? 如何通过 for 循环在 React class 组件中创建对象数组以映射到功能组件中？ - How do I create an array of objects in a React class component through a for loop to be mapped in a functional component? 如何加载通过JavaScript对象调用的JavaScript文件的功能 - How do I load the functions of a JavaScript File called through a JavaScript Object 如何在我的 React 组件中通过 onclick 在另一个 function 中调用一个 function？ - How do I call a function inside another function through onclick in my React component?

相关标签

粤ICP备18138465号 © 2020-2024 STACKOOM.COM