фигурные скобки-листовки React-Leader слева вверху карты - PullRequest
1 голос
/ 06 мая 2020

Когда карта находится слишком далеко, я могу увидеть фигурные скобки и символы возле панели масштабирования. Как я могу от них избавиться?

react-leaflet bug

ps предоставил некоторый код

ps 2 - когда я добавляю условие вроде {condition1 && condition2 && он показывает мне скобки и нули. Как я могу этого избежать при условиях ухода?

return (

    <LeafMap
        preferCanvas={true}
        ref={mapRef}
        zoom={zoom}
        center={[deviceCoordinatesLat, deviceCoordinatesLong]}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                   attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"/>

        {condition1 && condition2 &&
        <Control position="topright">
            <div className="notification-circle">
                <img src={notificationRedCircle}/>
                <p>{countOfCondition2}</p>
            </div>
        </Control>}

        {markers.map(item => (
            <Marker
                className={item.id}
                key={item.id}
                position={[item.coordinates[0], item.coordinates[1]]}
                icon={
                    new L.Icon({
                        iconUrl: require('../../../frontend/src/images/map/1.png'),
                        iconSize: new L.Point(15, 15),
                    })
                }
            >
            </Marker>
        ))}
    </LeafMap>
)
};

export default Map

Ответы [ 2 ]

1 голос
/ 06 мая 2020

У вас такая странная проблема, но она может ie при использовании нескольких { и } вложенных. Итак, один из возможных подходов к исправлению этого - оценить ваше состояние вне JSX и затем поместить в него одно значение.

Так что попробуйте:

const conditionEval = condition1 && condition2;

return(
  ...
  {conditionEval &&
    <Control position="topright">
        <div className="notification-circle">
            <img src={notificationRedCircle}/>
            <p>{countOfCondition2}</p>
        </div>
    </Control>
  }
  ...
)

0 голосов
/ 11 мая 2020

Благодаря @SMAKSS я начал перепроверять весь свой код и обнаружил: - мое состояние не было оценено как логическое - поэтому было 0 - я ввел одну избыточную скобку в свой код

Всем спасибо за усилие!

...