我是react-leaflet的新手。在下面的代码中,我没找到问题所在。为什么在<Circle />组件中的color和fillColor属性没有更新。但是当我执行console.log(casesTypeColors[casesType].hex)时,当casesType改变时值会更新,但是它不会反映在屏幕上。但是其他属性会更新。所以,请帮助我学习我哪里出错了。提前感谢。
import { Circle } from "react-leaflet";
const casesTypeColors = {
cases: {
hex: "#CC1034",
rgb: "rgb(204, 16, 52)",
half_op: "rgba(204, 16, 52, 0.5)",
multiplier: 800,
},
recovered: {
hex: "#7dd71d",
rgb: "rgb(125, 215, 29)",
half_op: "rgba(125, 215, 29, 0.5)",
multiplier: 1200,
},
deaths: {
hex: "#fb4443",
rgb: "rgb(251, 68, 67)",
half_op: "rgba(251, 68, 67, 0.5)",
multiplier: 2000,
},
};
// Draw circles on the map with interactive tooptip
export const showDataOnMap = (data, casesType = "cases") =>
data.map((country, index) => (
<Circle
key={index}
center={[country.countryInfo.lat, country.countryInfo.long]}
fillOpacity={0.4}
color={casesTypeColors[casesType].hex}
fillColor={casesTypeColors[casesType].hex}
radius={
Math.sqrt(country[casesType] / 10) *
casesTypeColors[casesType].multiplier
}
>
</Circle>
));
showDataOnMap
吗?你在哪里记录了.hex
值? - Seth Lutske