Блог

Главная - Вопросы по программированию - Есть ли способ добавить div к уже существующему div, автоматически сгенерированному листовкой в React JS?

Есть ли способ добавить div к уже существующему div, автоматически сгенерированному листовкой в React JS?

#javascript #html #reactjs #dom #leaflet

#javascript #HTML #reactjs #dom #листовка

Вопрос:

Пожалуйста, прочитайте вопрос два раза, это не дубликат.

Возможно ли добавить div, сгенерированный мной в JSX, к div, автоматически сгенерированному библиотекой leaflet в React?

 <div class="leaflet-top leaflet-left">

Библиотека Leaflet автоматически создает es div, в котором хранятся слои и т.д…
Я создал свой собственный селектор слоев, и я хотел бы добавить его в div, чтобы он имел правильное выравнивание. Я хочу добавить его в div, потому что у меня смешанные слои, один из которых создан leaflet, а другой создан мной.

Теперь я просто размещаю свой пользовательский слой рядом с листовкой div, но при разном соотношении сторон экрана / размерах он, как правило, не выровнен.

Вот в чем проблема, иногда он не выровнен должным образом:

Вот в чем проблема, иногда он не выровнен должным образом

Есть ли что-то вроде :

 DOM.writeByClassApend("leaflet-top leaflet-left", MyCustomLayer()}

Или есть способ добиться этого?

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

1. Почему вы думаете, что это не будет дубликат?

2. Потому что в react js типичным ответом на этот тип вопроса является использование react hrefs для поиска элементов, но в этом случае div генерируется автоматически leaflet, поэтому я не могу ссылаться на него.

Ответ №1:

Возможно ли добавить пользовательский div к уже существующему div, сгенерированному leaflet в React?

Да, это возможно с помощью этой библиотеки react-leaflet-control

Решение

Внутри вашей карты включите этот компонент Control, указывающий нужную вам позицию, а внутри этого компонента укажите свой пользовательский компонент

 import Control from 'react-leaflet-control';

    <Map
      center={this.state.center}
      zoom={10}
    >
      <Control position="topleft" >
        <div>
           My custom div
        </div>
      </Control>

      <TileLayer
        url='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        maxZoom={18}
      />
      



    </Map>