将 React 组件从自定义组件库导入 HTML
Posted
技术标签:
【中文标题】将 React 组件从自定义组件库导入 HTML【英文标题】：Importing React component from custom component library into HTML 【发布时间】：2022-01-23 03:50:31 【问题描述】：我创建了一个测试反应组件库（React、Typescript）并尝试使用 Rollup 将其打包到 UMD 中，以便我可以将组件导入 html 页面。
我创建的示例组件只使用了一个 label 属性并将其着色为橙色。一些超级简单如此复杂的逻辑将被排除在等式之外。
React 代码呈现上述文本：
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;
上面的组件是通过 Rollup 打包成 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
未捕获的类型错误：React__namespace.createElement 不是函数 品牌 Brand.tsx:8 反应 17 test.html:20 Brand.tsx:8:11
任何帮助将不胜感激。
提前感谢您的宝贵时间！
【问题讨论】：
你有没有尝试在反应导入脚本标签之后将你的脚本标签放入库？ 哦..我的..天哪，这绝对有效！太感谢了！我不敢相信这就是全部。 太棒了！我已将其添加为答案。 【参考方案1】：似乎脚本标签的顺序不正确。您的库需要先导入 React，然后才能执行它的脚本。
只需修复订单以使其正常工作
<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>
【讨论】：
以上是关于将 React 组件从自定义组件库导入 HTML的主要内容，如果未能解决你的问题，请参考以下文章
导入使用 React-Router-Dom 的自定义模块组件时出现问题
REACT NATIVE 系列教程之二创建自定义组件&&导入与使用示例