如何在React.js中使用morris.js？
如何在React.js中使用morris.js？
提问于 2020-07-21 12:43:50
import React, { useEffect } from "react";
import Raphael from "raphael/raphael";
import "morris.js/morris.js";
import "morris.js/morris.css";
const Test = () => {
useEffect(() => {
window.Raphael = Raphael;
Morris.Donut({
element: "test",
data: [
{
label: "a",
value: 49,
},
{
label: "b",
value: 51,
},
],
colors: ["#5f76e8", "#01caf1"],
formatter: function (value, data) {
return value + "%";
},
});
}, []);
return <div id="test" />;
};
export default Test;我想在React.js中使用morris.js。
但是这段代码返回一个错误。
(第9:9行:未定义'Morris‘)
但是，就在此错误短语出现之前，饼图短暂可见，但很快错误短语就会立即出现。
我怎么使用它？
回答 1
Stack Overflow用户
发布于 2020-07-21 13:06:04
有几种方法可以解决这个问题。如果您提到的包是umd或commonjs类型的，您可以要求直接使用：
const yourModule = import('morris.js/morris.js')或者，如果您将包加载为外部包，例如CDN site，我假设您现在是作为捆绑器的webpack，那么您只需在webpack.config.js中对其进行配置
externals : {
morris: "Morris"
},在您的html模板中，index.html将如下所示：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>然后，您只需导入以在您的模块中使用：
import morris from "morris"页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63007541
复制相关文章
相似问题
腾讯云开发者
