将React组件从自定义组件库导入HTML中
我创建了一个测试库( react，Typescript)，并试图使用Rollup将其打包到UMD中，以便我可以将组件导入HTML页面。
我创建的示例组件只需要一个label道具，并将其着色为橙色。一些非常简单，如此复杂的逻辑将被从方程式中剔除。
响应代码以呈现上述文本：
import * as React from 'react';
import * as Test from 'react-webpack-demo';
function App() {
return (
<div>
<h1>
{
React.createElement(Test.Brand, { label: 'Brand Label Text'})
}
</h1>
</div>
);
}
export default App;上述组件是通过汇总打包成要导入的CJS格式的。我还尝试将相同的内容打包到UMD中，以便将其导入HTML。完整的rollup.config.js文件如下：
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import external from 'rollup-plugin-peer-deps-external';
import packageJson from './package.json';
export default [
{
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true
},
{
file: packageJson.module,
format: 'umd',
name: 'Test',
sourcemap: true
}
],
plugins: [
resolve(),
babel({
exclude: 'node_modules/**',
presets: [
'@babel/preset-react',
'@babel/preset-typescript'
]
}),
external(),
commonjs(),
typescript({ tsconfig: './tsconfig.json' })
],
external: [
...Object.keys(packageJson.dependencies || {}),
...Object.keys(packageJson.peerDependencies || {})
]
}
]然后，我尝试将新打包的UMD文件导入到我的HTML页面中，并将其呈现到DOM元素中：
<html lang="en-US">
<head>
<title>Test</title>
<meta charset="utf-8" />
<script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<h1>Testing rollup in plain HTML</h1>
<hr />
<div id='brand-test'></div>
<script>
const el = React.createElement;
const domContainer = document.getElementById('brand-test');
ReactDOM.render(el(
Test.Brand,
{
label: 'Demo works!'
}
), domContainer);
</script>
</body>
</html>但我得到了以下错误：
组件中发生了上述错误：
Brand@file:///Users/jacorbello/repos/temp/react-webpack-demo/dist/umd/index.js:33:1 Uncaught : React__namespace.createElement不是一个功能品牌Brand.tsx:8 React 17 test.html:20 Brand.tsx:8:11
如果能提供任何帮助，我们将不胜感激。
提前谢谢你的时间！
回答 1
Stack Overflow用户
发布于 2021-12-21 18:57:22
似乎脚本标签的顺序不对。在执行其脚本之前，您的库需要对导入作出反应。
只要修一下命令就行了
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>https://stackoverflow.com/questions/70440279
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号