Блог

Главная - Вопросы по программированию - как динамически изменять цветовую опору компонента Circle в react-leaflet?

как динамически изменять цветовую опору компонента Circle в react-leaflet?

#javascript #html #css #reactjs #react-leaflet

#javascript #HTML #css #reactjs #react-leaflet

Вопрос:

Я новичок в react-leaflet. Итак, в приведенном ниже коде я не нашел, в чем проблема. почему свойства color и fillColor не обновляются в компоненте <Circle /> из react-leaflet.Но когда я выполняю 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>
  ));

Комментарии:

1. можем ли мы посмотреть , что вы используете showDataOnMap ? где вы регистрируете .hex значение?

Ответ №1:

В функции showDataOnMap напишите:

 <Circle pathOptions={{color: casesTypeColors[casesType].hex,
                     fillColor: casesTypeColors[casesType].hex }}>

вместо

 <Circle color={casesTypeColors[casesType].hex}
      fillColor={casesTypeColors[casesType].hex}>

Метки: