Question

该代码正在使用属性“名称”，名称在地图上正确显示。

我想用来自我的mysql数据库的数据来丰富json文件（例如，以法语或西班牙语添加国家名称）。

我添加了一个状态“ countries”，该状态将使用在对象中转换的json文件进行初始化。我从sql数据库中获取数据，然后使用要添加的数据将状态设置为“国家”。

这是代码：

import React, { Component } from "react"
import {
  ComposableMap,
  ZoomableGroup,
  Geographies,
  Geography,
} from "react-simple-maps"
import ReactTooltip from "react-tooltip"
import jsonWorldMap from "./maps/world-50m.json"

const wrapperStyles = {
  width: "100%",
  height: "100%",
  backgroundColor: "#0565A1"
}

class WorldMap extends Component {
  constructor(){
    super()

    this.state = {
      zoom: 1,
      color: "#39464E",
      countries: jsonWorldMap
    }
  }

  componentDidMount() {

    //get all countries in db
    fetch('http://localhost:3001/countries')
      .then(res => res.json())
      .then(body => 
        body.data.forEach(function(elementSql){
          jsonWorldMap.objects.units.geometries.forEach(function(elementJson){
            if(elementSql.alpha3 == elementJson.id)
            {
              elementJson.properties.nameFr = elementSql.name_fr;
            }
          })
        })
      )
      this.setState({ countries: jsonWorldMap }, () => console.log(this.state.countries))
  }


  render() {
    return (
      <div style={wrapperStyles}>
        <ComposableMap>         
          <ZoomableGroup center={[0,20]}>
            <Geographies geography={this.state.countries}>
              {(geographies, projection) => geographies.map((geography, i) => geography.id !== "ATA" && (
                <Geography
                  className="Geography"
                  key={i}
                  data-tip={geography.properties.nameFr}
                  geography={geography}
                  projection={projection}
                />
              ))}
            </Geographies>
          </ZoomableGroup>
        </ComposableMap>
        <ReactTooltip />
      </div>
    )
  }
}

export default WorldMap

因此您可以看到我添加了一个组件，在该组件的末尾具有console.log。看看console.log提供了什么：

因此您可以看到状态对象'countries'中存在属性'nameFr'。但是，如果我尝试将其显示为工具提示，则无法使用。它与属性“名称”（在数据提示中）完美配合

Answer 1

使用一个将data-tip用作props的元素来包裹地理。

<div data-tip={geography.properties.nameFr}>
  <Geography ... />
</div>

为了进行<Geography data-tip={props.nameFr}/>工作，Geography组件需要内部使用data-tip属性，例如：

function Geography(props) {
  return <h1 data-tip={props['data-tip']}>I'm a map</h1>;
}

要解决您的问题，您需要将data-tip属性附加到Geography包装器中，例如：

function Geography(props) {
  return <h1>I'm a map</h1>;
}

function ComponentWithTooltip({ props }) {
  return (
    <div data-tip="nameFr">
      <Geography />
    </div>
  );
}

function App() {
  return (
    <>
      <Geography data-tip="hello-world" />    // Your way, won't work

      <ComponentWithTooltip />                // Work

      <div data-tip="nameFr2">                // Work
        <Geography />
      </div>

      // Works with div wrapper, without won't work.
      {geographies.map((geofraphy, i) => (
        <div key={i} data-tip={geofraphy.properties.nameFr}>
          <Geography />
        </div>
      ))}

      <ReactTooltip />
    </>
  );
}

查看所有用例的演示

Answer 2

如果data-tip={geography.properties.name}正常工作，但data-tip={geography.properties.nameFr}不能正常工作，那么看来问题出在状态上。

请参阅您的componentDidMount方法。您将在此方法结尾使用jsonWorldMap更新状态。

但是由于提取是异步的，因此jsonWorldMap可能尚未更新。因此，我认为您应该在获取中移动该行。请看下面：

  componentDidMount() {
    const _this = this; // hold this inside _this
    //get all countries in db
    fetch('http://localhost:3001/countries')
      .then(res => res.json())
      .then(body => {
        body.data.forEach(function(elementSql){
          jsonWorldMap.objects.units.geometries.forEach(function(elementJson){
            if(elementSql.alpha3 == elementJson.id)
            {
              elementJson.properties.nameFr = elementSql.name_fr;
            }
          })
        });
        _this.setState({ countries: jsonWorldMap }, () => console.log(this.state.countries)); //making sure setting updated jsonWorldMap to state
      }
      )     
  }

希望有帮助。

谢谢

状态元素未出现在带有react-tooltip的react简单地图上

2 个答案: