Question

我不能在样式道具中使用来自json的变量。如何使用此变量获取正确的填充颜色？

我试图将变量直接传递给fill属性。

我得到一个错误，因为变量geography.properties.discovered无法访问样式属性。我想访问它。

    <ComposableMap
      projectionConfig={{
        scale: 205,
      }}
      width={980}
      height={500}
      style={{
        width: "100%",
        height: "auto",
      }}
      >

      <ZoomableGroup center={[0,20]} zoom={this.state.zoom}>
        <Geographies geography={ jsonWorldMap }>
          {(geographies, projection) => geographies.map((geography, i) => geography.id !== "ATA" && (
            <Geography
              className="Geography"
              key={i}
              data-tip={geography.properties.name}
              onClick={() =>  this.countryClick(geography.id)}
              geography={geography}
              projection={projection}
              style={
                {
                default: {
                  fill: {geography.properties.discovered ? "#ECEFF1" : "#607D8B"}, //Here is the problem
                  stroke: "#607D8B",
                  strokeWidth: 0.75,
                  outline: "none",
                },
                hover: {
                  fill: "#607D8B",
                  stroke: "#607D8B",
                  strokeWidth: 0.75,
                  outline: "none",
                  cursor: "pointer"
                },
                pressed: {
                  fill: "#FF5722",
                  stroke: "#607D8B",
                  strokeWidth: 0.75,
                  outline: "none",
                },
              }
            }
            />
          ))}
        </Geographies>
      </ZoomableGroup>
    </ComposableMap>

Answer 1

这是方法：

fill: geography.properties.discovered ? "#ECEFF1" : "#607D8B",

如何在组件样式中使用变量

1 个答案: