html - 在单个 HTML 页面中使用 Nivo 图形库 (React)
问题描述
我有一个带有 React 的 HTML 页面(无需任何工具手动构建,只是一个文本编辑器)。此页面工作正常。现在,我想用 NIVO lib 添加一个饼图。
当我添加脚本(CDN)时,我在控制台中收到以下错误:
exports is not defined
我可以通过创建一个假的来解决这个问题exports var = {}
(这是一个好的解决方案吗?)
但后来我有一个新的错误:
require is not defined
这是否意味着来自 NIVO 的 CDN 链接不正确?如何解决这个问题?
替代方案:我愿意使用另一个与 React 一起工作的库。但我只想使用 CDN 链接和文本编辑器来实现这一点。
完整的 HTML 文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Batch stats</title>
<script>let exports = {};</script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@nivo/pie@0.61.1/dist/nivo-pie.cjs.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Page(props) {
return (
<div>
<h1>Hello World</h1>
<div>How to add a PIEChart ?</div>
</div>
);
}
ReactDOM.render(<Page version="v3"/>, document.getElementById('root'));
</script>
</body>
</html>
谢谢
解决方案
推荐阅读
- java - 删除字符串中的特定字符
- html - 无法在模态上关闭模态
- abap - 从 GET_AUTH_VALUES FM 输出构造 SQL 查询
- json - 无法在 Visual Studio 2017 中创建 JSON 文件
- c# - 如果我们不在 API 中使用 DTO,会发生什么?
- java - 使用 Spring 在 JpaRepository 中可以使用 IN 子句和 JOIN 进行查询吗?
- python - N维阵列广播
- javascript - Google 扩展如何将我的脚本注入到活动选项卡并与弹出按钮链接?
- php - 如何解决 php 数组插入数据库中的 JSON Formate 问题
- c - GCC 默认整数/浮点算术行为