react-leaflet 版本 2 --> 3 中断代码答案

【问题标题】：react-leaflet version 2 --> 3 breaks codereact-leaflet 版本 2 --> 3 中断代码
【发布时间】：2022-02-18 18:30:49
【问题描述】：

在过去的几天里，这一直给我带来问题。考虑一下这个简单的代码，在您按下按钮时更改圆圈的颜色。


  const handleClick = (e) => {
    if (color === "red") {
      setColor("blue");
    } else {
      setColor("red");
    }
  };

<button style={{ textAlign: "center" }} onClick={handleClick}>
        Click me to change colour!
</button>

 <MapContainer center={position} zoom={13} style={{ height: "100vh" }}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {lightRailStop.features.map((feature, index) => {
          return (
            <Circle
              center={[
                feature.geometry.coordinates[1],
                feature.geometry.coordinates[0]
              ]}
              fillColor={color} //this part is set by a function
              radius={200}
              weight={1}
              opacity={1}
              fillOpacity={0.8}
            />
          );
        })}
      </MapContainer>

当您使用react-leaflet v2 时，它可以工作。但是，v3 完全打破了这一点，我不知道为什么。

非常感谢您在这方面的帮助，因为我差点把头发扯下来试图让简单的事情发挥作用

codebox（可以使用依赖框来改变版本） https://codesandbox.io/s/react-leaflet-geojson-oneachfeature-popup-with-custom-react-component-forked-mx6pd8?file=/src/App.js

注意：MapContainer 不适用于 v2 -> 需要替换为 Map

【问题讨论】：

标签： reactjs leaflet react-leaflet

【解决方案1】：

我找到了解决此问题的方法，但这与其说是官方解决方案，不如说是一种解决方法。无论如何，这是我得到的：

首先，在您的组件中，定义一个 ref，它将包含一个 Circle 引用数组：

const circleRefs = useRef();
circleRefs.current = [];

然后，当您创建圆时，将圆添加到引用数组中（请注意，我为您的 Circle 组件添加了一个键，因为 React 希望数组的每个子项都使用这样的键进行索引）：

<Circle
  key={index} // Add a key here
  center={[
    feature.geometry.coordinates[1],
    feature.geometry.coordinates[0]
  ]}
  fillColor={color}
  radius={200}
  weight={1}
  opacity={1}
  fillOpacity={0.8}
  ref={(ref) => { // Add the current circle to the references array
    circleRefs.current.push(ref);
  }}
/>

然后，由于地图没有在颜色变化时刷新，因此手动处理更新如下：

useEffect(() => {
  circleRefs.current.map((circle) => circle.setStyle({ fillColor: color }));
},[color]);

正如我所说，我不知道是否有更好的方法以更具反应性的方式来做到这一点（只需更新颜色状态，因此圆圈会自行更新），但这个解决方案可以完成这项工作。

顺便说一句，我无法让它适用于 reat 传单 v2，我在你的代码和框中遇到错误。

【讨论】：

感谢您的回答！是的，MapContainer 是 react-leaflet v3 的新功能，如果您希望它适用于 v2，则需要使用 Map 代替。我看到了解决方法，想知道为什么这种行为会破坏
啊，没错，谢谢@Wboy！我检查了文档，发现了一些有趣的东西，请查看我的其他答案

【解决方案2】：

根据文档，要更改图层的颜色，您应该通过pathOptions 设置它，而不再使用fillOptions。所以最后，你的Circle 组件应该是这样的：

<Circle
  key={index}
  center={[
    feature.geometry.coordinates[1],
    feature.geometry.coordinates[0]
  ]}
  pathOptions={{ color }} // Use pathOptions
  radius={200}
  weight={1}
  opacity={1}
  fillOpacity={0.8}
/>

实际上，有趣的是fillOptions 仍然有效，但它是不可变的，因此在您的情况下它没有用（因为它允许您只设置一个初始值，但它永远不能再更改） .

【讨论】：

这能解决你的问题吗@Wboy？