Javascript 如何通过状态或道具使react传单地图跳转到不同的latlong？

我才开始反应2周，虽然我学到了很多东西，但一些反应的想法仍然让我难以理解

现在，我在页面的左半部分有一张React传单地图。我在上面有3个标记，当我点击每个市场时，它会正确地设置视图，因为视点会正确地移动。也计算出了缩放级别，所以可以很好地移动

//TestMap.jsx
const MapLeaflet = () => {

const mapRef = useRef(null);
const [someLocations] = useState([
    [-55, 50],
    [-46, 30],
    [-64, 71]])

useEffect(() => {

    const w = 1000
    const h = 1000
    const url = "./custommap.jpg"

    var map = mapRef.current.leafletElement;

    var sw = map.unproject([0, h], 1);
    var ne = map.unproject([w, 0], 1);

    var bounds = [sw, ne]

    const image = L.imageOverlay(
      url,
      bounds
    ).addTo(map);

    map.fitBounds(image.getBounds());

  })

function centerMapView(e) {
    const { leafletElement } = mapRef.current;
    if (e) {
      console.log(e.latlng)
      leafletElement.setView(e.latlng, 4);
    }
  }

return (
    <LeafletMap
      ref={mapRef}
      crs={CRS.Simple}
    >
      {someLocations.map((position, i) => (
        <Marker
          position={position}
          key={i}
          onClick={centerMapView}
        >
        </Marker>
      ))}
    </LeafletMap>
  );
};

export default MapLeaflet;

//TestMap.jsx
常数MapLeaflet=（）=>{
const mapRef=useRef（null）；
常量[某些位置]=使用状态([
[-55, 50],
[-46, 30],
[-64, 71]])
useffect（（）=>{
常数w=1000
常数h=1000
const url=“./custommap.jpg”
var map=mapRef.current.element；
var sw=map.unproject（[0，h]，1）；
var ne=map.unproject（[w，0]，1）；
变量边界=[sw，ne]
常量图像=L.imageOverlay(
网址，
界限
).addTo（地图）；
map.fitBounds（image.getBounds（））；
})
功能中心地图视图（e）{
常量{element}=mapRef.current；
如果（e）{
控制台日志（如latlng）
传单元素。设置视图（如latlng，4）；
}
}
返回(
{someLocations.map（（位置，i）=>(
))}
);
};
导出默认的MapLeaflet；

这个运行得很好。这是我的App.js

class App extends Component {

render() {
    return (
      <Wrapper>
        <Row>
          <Col size='6'>
            <div style={{ backgroundColor: "#000" }}>
              <Testmap />
            </div>
          </Col>
          <Col size='6'>
             <p><a href="#loc1">LOCATION1</a></p>
             <p><a href="#loc2">LOCATION2</a></p>
             <p><a href="#loc3">LOCATION3</a></p>
          </Col>
       </Row>
    </Wrapper>
    );
  }
}

export default App;

类应用程序扩展组件{
render（）{
返回(



);
}
}
导出默认应用程序；

问题出在这里。我想在网页的右半部分做同样的一些链接。基本上，位置1、位置2和位置3。我希望他们将地图移到匹配位置的中心

对于常规的传单.js，我只需要使用onClick事件处理程序调用setView（x，y）。但我如何使用React/React传单来实现这一点

我知道我需要通过“CurPos”（这是我在TestMap中定义的一些位置之一）。。。或者我可以传递某些位置的索引，比如某些位置[1]？然后呢

---

（您可以假设所有标记都已正确定义，因为它们大多只是准引导包装）

一些实现：

a） 您不能将状态传递给功能组件，TestMap是一个功能组件。最后我把它作为一个普通的类组件重写了

b） 然后遇到了一堆不兼容的问题，因为我不能使用useEffect和类似的东西。我最终使用了createRef，因为它已经被使用了

c） 发现自己绑定到了错误的对象，必须更改*centerMapView的.bind（当它是一个功能组件时不需要更改）

d） 不得不把“这个”加在一堆其他的东西上

但最终的结果是有效的。该链接名为handleClick（），它使用somelocations数组中的某个内容调用centerMapView2（），并将其移动。这可能不是100%正确的运行代码，但应该足够接近，以便您理解代码

更新的源代码：

class MapLeaflet extends Component {
  constructor(props) {
    super(props);

    this.mapRef = createRef()

    // const [curPos, setcurPos] = useState(0)
    this.centerMapView = this.centerMapView.bind(this)
  }
componentDidMount() {
    var map = this.mapRef.current.leafletElement;
    console.log(this.mapRef)
    const w = 1000
    const h = 1000
    const url = "./custommap.jpg"
    L.Marker.prototype.options.icon = customMarker;
    var sw = map.unproject([0, h], 1);
    var ne = map.unproject([w, 0], 1);
    var bounds = [sw, ne]
    const image = L.imageOverlay(
      url,
      bounds
    ).addTo(map);
    map.fitBounds(image.getBounds());
  }

  centerMapView(e) {
    console.log(this)
    let { leafletElement } = this.mapRef.current;
    if (e) {
      leafletElement.setView(e.latlng, 4);
    }
  }

centerMapView2(id) {
    let { leafletElement } = this.mapRef.current;
    var curPos = someLocations[id]
    leafletElement.setView(curPos, 4);
  }

render() {
    return (
      <Map
        ref={this.mapRef}
        crs={CRS.Simple}
      >
        {someLocations.map((position, i) => (
          <Marker
            position={position}
            key={i}
            className={i}
            icon={customMarker}
            onClick={this.centerMapView}
          >
          </Marker>
        ))}
      </Map>
    );
  }
}
export default MapLeaflet;

类MapLeaflet扩展组件{
建造师（道具）{
超级（道具）；
this.mapRef=createRef（）
//const[curPos，setcurPos]=useState（0）
this.centerMapView=this.centerMapView.bind（this）
}
componentDidMount（）{
var map=this.mapRef.current.element；
console.log（this.mapRef）
常数w=1000
常数h=1000
const url=“./custommap.jpg”
L.Marker.prototype.options.icon=customMarker；
var sw=map.unproject（[0，h]，1）；
var ne=map.unproject（[w，0]，1）；
变量边界=[sw，ne]
常量图像=L.imageOverlay(
网址，
界限
).addTo（地图）；
map.fitBounds（image.getBounds（））；
}
centerMapView（e）{
console.log（这个）
设{lappeleElement}=this.mapRef.current；
如果（e）{
传单元素。设置视图（如latlng，4）；
}
}
centerMapView2（id）{
设{lappeleElement}=this.mapRef.current；
var curPos=某些位置[id]
设置视图（curPos，4）；
}
render（）{
返回(
{someLocations.map（（位置，i）=>(
))}
);
}
}
导出默认的MapLeaflet；

然后app.js看起来像这样：

class App extends Component {
  constructor(props) {
    super(props);
    this.map2Element = React.createRef();
  }

  state = {}

  handleClick = id => {
    this.map2Element.current.centerMapView(id - 1)
  };

render() {
    return (
      <Wrapper>
        <Row>
          <Col size='6'>
            <div style={{ backgroundColor: "#000" }}>
              <Testmap />
            </div>
          </Col>
          <Col size='6'>
             <p><a href="#loc1" key=1 onclick={()=> this.handleClick(location1)}>LOCATION1</a></p>
             <p><a href="#loc2" key=2 onclick={()=> this.handleClick(location2)}>LOCATION2</a></p>
             <p><a href="#loc3" key=3 onclick={()=> this.handleClick(location3)}>LOCATION3</a></p>
          </Col>
       </Row>
    </Wrapper>
    );
  }
}

export default App;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.map2Element=React.createRef（）；
}
状态={}
handleClick=id=>{
此.map2Element.current.centerMapView（id-1）
};
render（）{
返回(



);
}
}
导出默认应用程序；