我想在react ssr上实现jvectorMap,但我不知道为什么会在codeandbox上尝试此错误,而在codeandbox上可以使用。
这是我创建的codeandbox示例: https://codesandbox.io/s/cocky-maxwell-8kkzc
我使用的软件包:react-jvectormap
将此添加到html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jvectormap/2.0.4/jquery-jvectormap.css" type="text/css" media="screen"/>
在应用程序中使用自爆组件
import React from "react";
import { VectorMap } from "react-jvectormap";
const mapData = {
CN: 100000,
IN: 9900,
SA: 86,
EG: 70,
SE: 0,
FI: 0,
FR: 0,
US: 20
};
const handleClick = (e, countryCode) => {
console.log(countryCode);
};
const Map = () => {
return (
<div>
<VectorMap
map={"world_mill"}
backgroundColor="transparent" //change it to ocean blue: #0077be
zoomOnScroll={false}
containerStyle={{
width: "100%",
height: "520px"
}}
onRegionClick={handleClick} //gets the country code
containerClassName="map"
regionStyle={{
initial: {
fill: "#e4e4e4",
"fill-opacity": 0.9,
stroke: "none",
"stroke-width": 0,
"stroke-opacity": 0
},
hover: {
"fill-opacity": 0.8,
cursor: "pointer"
},
selected: {
fill: "#2938bc" //color for the clicked country
},
selectedHover: {}
}}
regionsSelectable={true}
series={{
regions: [
{
values: mapData, //this is your data
scale: ["#146804", "#ff0000"], //your color game's here
normalizeFunction: "polynomial"
}
]
}}
/>
</div>
);
};
export default Map;
出现的错误:
node_modules\react-jvectormap\build\index.js:6504
l.fn.vectorMap = function (l) {
^
TypeError: Cannot set property 'vectorMap' of undefined