Question

我正试图在Gatsby中使用react-jvectormap，但是我的地图的高度没有增加。除了高度，我所有的CSS都在工作（包括宽度）。当我更改我的Navigationur窗口大小时，似乎高度会适应甚至遍历容器。

在我的页面上，它看起来像这样： https://i.stack.imgur.com/HcT4t.png

此外，当我检查它时，请显示以下内容： https://i.stack.imgur.com/RHKKY.png

这是代码：

import React from "react"
import { VectorMap } from "react-jvectormap"
import mapStyles from "./map.module.css"
//const countries = require("country-list")

export default class Map extends React.Component {
  state = {
    isLoading: true, // gestion du chargement
    mapData: {},
  }

  async componentDidMount() {
this.constructor.name);
    this.setState({
      isLoading: false, 
      mapData: {
        FR: 1,

      },
    })
  }
  // Gestion des événenemts :
  handleClick = (event, code) => {
    this.props.changeState(code)
  }

  render() {

    if (this.state.isLoading) {
      // console.log("loading")
      // ce que l'on veut render avant le chargement
      return null
    }
    // ce que l'on veut render avant le chargement
    return (
      <div className={mapStyles.mapContainer}>
        <div className={mapStyles.jvmapSmart}>
          <VectorMap
            className={mapStyles.mapMap}
            onRegionClick={this.handleClick}
            map={"world_mill"}
            backgroundColor="pink"
            ref="map"
            containerStyle={{
              width: "100%",
              height: "100%",
            }}
            regionStyle={{
              initial: {
                fill: "#e4e4e4",
                "fill-opacity": 0.9,
                stroke: "none",
                "stroke-width": 0,
                "stroke-opacity": 0,
              },
              hover: {
                "fill-opacity": 0.8,
                cursor: "pointer",
              },

              selectedHover: {},
            }}
            series={{
              regions: [
                {
                  values: this.state.mapData, //this is your data
                  scale: ["#417DD7", "#EF6B93"], //your color game's here
                  normalizeFunction: "polynomial",
                },
              ],
            }}
            focusOn="FR"
            zoomOnScroll={false}
          />
        </div>
      </div>
    )
  }
}

.mapContainer {
  height: 300px;
  width: 100px;
  border: 1px black solid;
}

.mapMap {
  height: 100%;
}

.jvmapSmart {
  width: 100%;
  height: 100%;
}

非常感谢：）

与Gatsby的react-jvectormap：地图的高度不会增加

0 个答案: