Блог

Я работаю над проектом React, и по какой-то причине я решил использовать пакет bootstrap, а не пакет react-bootstrap, и теперь я столкнулся с этой проблемой:

В загрузочном модале есть тег Link (компонент из пакета react-router-dom), который ведет себя как тег ‘a’, но без перезагрузки страницы. Итак, теперь, когда я нажимаю на эту ссылку, она выполняет свою работу, но, к сожалению, модал останется показанным.

 <Link to="/home">Home</Link>
  

Я попытался добавить к нему свойство data-dismiss=»modal», и это действительно сработало — оно закроет модал после нажатия на ссылку, но не выполнит свою реальную работу, которая заключается в изменении URL…

 <Link to="/home" data-dismiss="modal">Home</Link>
  

Я также попробовал эти два варианта, и они сгенерировали такое же поведение:

это:

 <Link to="Home">
  Home
  <a data-dismiss="modal"></a>
</Link>
  

и это:

 <a data-dismiss="modal">
  <Link to="/home">Home</Link>
</a>
  

Я нашел решения с использованием jQuery, но использовать jQuery в моем коде только для решения этой проблемы не очень хорошая идея, особенно потому, что я использую React.
Я также избегаю того факта, что я должен использовать пакет react-bootstrap вместо этого, потому что мне придется изменить много кода в моем проекте.

Следующие снимки экрана взяты из фактического кода начальной загрузки. В частности modal.js

Вы можете обратиться сюда, если хотите увидеть это сами: https://github.com/twbs/bootstrap/blob/b083c9639fd9012e5cba57d6c4088d43b3c3e57d/js/src/modal.js

Итак, суть в том, что ваш проект, вероятно, использует jQuery из-за того, что

Я попытался добавить к нему свойство data-dismiss=»modal», и оно действительно сработало

Так что просто продолжайте и используйте jQuery, если вам действительно нужно продолжать использовать исходный загрузчик. Следующее возможное решение — написать свой собственный скрипт для закрытия модала.

Bootstrap использует эти элементы для модального:

Фон

 <div class="modal-backdrop fade show"></div>
  

и модальный элемент

 <div class="modal fade show" id="exampleModalLive" tabindex="-1" aria-labelledby="exampleModalLiveLabel" style="display: block; padding-right: 17px;" aria-modal="true" role="dialog">
  

Вам нужно будет найти способ (1) удалить show класс в модальном элементе и изменить его свойство отображения CSS, (2) удалить элемент модального фона при закрытии. Оба из которых вам, вероятно, придется мутировать в DOM напрямую, если только вам не нужно преобразовать реализацию в компоненты на основе React — что уже сделали react-bootstrap или reactstrap.