Question

我想在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

无法设置未定义的属性“ vectorMap”

0 个答案: