React-Leaflet：尽管 Redux 存储中的颜色值更新，折线不会改变颜色

Question

我已经设置了一个包含十六进制颜色代码的 Redux 存储。我计划实现一个功能，用户可以选择线条显示的颜色。但是，当我使用选择器更新折线的颜色属性时，地图上的线本身不会改变颜色。我已经验证 redux 商店工作正常。

const DashboardLineAnimation: React.FC<Props> = (): ReactElement => {

    const [start, setStart] = useState([0, 0]);
    const [end, setEnd] = useState([45, 45]);

    return (
        <div>
            <input onChange={() => {setStart([start[0] + 10, start[1] + 10])}}></input>
            <Polyline color={useSelector((state: RootState): string => state.attackMap.options.color.hex)} positions={[start as LatLngTuple, end as LatLngTuple]} />
        </div>
    );
};

Answer 1

您必须使用记录的 prop

pathOptions

，它是一个对象，该对象上的属性

color

并更改该属性的值。

color

属性可用，但通常它应该是不可变的，因为它没有记录在 官方文档 中，而

pathOptions

被记录为可变的，因此可以更改。

使用时还要确保

Polyline

是 MapContainer 的子级。这是一个不使用带有本地状态变量的 redux 的 demo

function App() {
  ...
  const [color, setColor] = useState("blue");

  const handleClick = () => setColor("red");

  return (
    <>
      <button onClick={handleClick}>Change polyline color</button>
      <MapContainer center={position} zoom={13} style={{ height: "100vh" }}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Polyline pathOptions={{ color }} positions={polyline} />
      </MapContainer>
    </>
  );
}

Answer 2

如果我在 MapContainer 之外将折线创建为 JSX.Element，有办法做到这一点吗？

    function App() {
      ...
      const [color, setColor] = useState("blue");
    
      const handleClick = () => setColor("red");

      const myPolyline: JSX.Element = <Polyline pathOptions={{ color }} positions={polyline} />
    
      return (
        <>
          <button onClick={handleClick}>Change polyline color</button>
          <MapContainer center={position} zoom={13} style={{ height: "100vh" }}>
            <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            
           {myPolyline}

          </MapContainer>
        </>
      );
    }