React传单:尽管Redux商店更新了颜色值，但Polyline不会改变颜色

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

您必须使用文档化的道具pathOptions，即该对象的属性color，并更改该属性的值。color道具是可用的，但通常它应该是不可变的，因为它没有记录在官方文档中，而pathOptions记录为可变的，因此可以更改。

在使用Polyline时，还要确保它是MapContainer的子级

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>
</>
);
}