如何让我的 Popup 在选择一个选项后自动出现在 reactJS 中？传单js

Question

我正在使用 Leaflet JS

export const showDataOnMap = (data, casesType ='cases', selectedCountry) => 
data.map(country => (
    <Circle
        center={[country.countryInfo.lat, country.countryInfo.long]}
        fillOpacity={0.4}
        pathOptions={country.countryInfo.iso2 === selectedCountry
                        ? casesTypeColors[casesType].highlight /* if selectedCountry then highlight circle! */
                        : casesTypeColors[casesType].option
        }   
        
    radius = {
        Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier / 2
    }
    >
    
    <Popup popupopen={country.countryInfo.iso2 === selectedCountry ? Popup.openPopup()}>
        <div className="info-container">
            <div
                className='info-flag'
                style={{backgroundImage: `url(${country.countryInfo.flag})`}}
            />
            <div className='info-name'>{country.country}</div>
            <div className='info-cases'>Cases: {numeral(country.cases).format("0,0")}</div>
            <div className='info-recovered'>Recovered: {numeral(country.recovered).format("0,0")}</div>
            <div className='info-deaths'>Deaths: {numeral(country.deaths).format("0,0")}</div>
        </div>
    </Popup>
</Circle>

当我 select 从我的下拉菜单中选择一个选项时，又名“country.countryInfo.iso2 === selectedCountry”，我希望在我的组件中立即出现。但是，我不确定如何在组件中使用 .openPopup 方法。我基本上只希望弹出窗口在条件“country.countryInfo.iso2 === selectedCountry”为真时出现。

我正在使用 Leaflet JS

Answer 1

要根据 Circle 打开弹出窗口（并且满足特定条件时），可以引入以下组件：

function CountryPOI(props) {
  const { selected } = props;
  const ref = useRef(null);

  useEffect(() => {
    if (selected) {
      ref.current.openPopup();
    }
  });

  return (
    <Circle ref={ref} {...props} >
      <Popup position={props.center}>{props.name}</Popup>
    </Circle>
  );
}

其中 selected 属性决定弹出窗口是否应该打开。

以下示例显示如何为第一项打开弹出窗口：

<CountryPOIs data={data} selectedIndex={0} />

其中 CountryPOIs 组件呈现标记列表（圆圈）：

function CountryPOIs({ data, selectedIndex }) {
  return data.map((item, i) => (
    <CountryPOI
      key={i}
      selected={i === selectedIndex}
      center={[item.position.lat, item.position.lng]}
      fillOpacity={0.5}
      radius={100000}
      name={item.name}
    ></CountryPOI>
  ));
}

这里有一个 live demo 演示了如何在选择一个选项时打开弹出窗口。

如何让我的 Popup 在选择一个选项后自动出现在 reactJS 中？传单js

how to make my Popup appear in reactJS automatically upon selecting an option? Leaflet-js

javascript

leaflet

reactjs

react-leaflet