Компонент React: Foundation Modal (Reveal) не откроется

62
7

Поэтому я только начал изучать React и Redux, поэтому извиняюсь, если это очень нубийский вопрос. Но я опустошил свою цитату из Google и не могу найти ничего, что помогло бы мне.

Моя проблема: я работаю на сайте с React, Redux и Foundation 6. У одного из моих компонентов React есть ссылка, которая при нажатии должна открывать Modal с определенным предупреждением для этой ссылки. Таким образом, я создал компонент с моей модальной разметкой:

ComponentModal.js:

import React, { PropTypes } from 'react';
const Modal = () => (
<div className="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
</div>
);

export default Modal;

Компонент со ссылкой дает некоторые вещи, но в основном имеет

<a data-open="exampleModal1">Click me for a modal</a>

тег в нем визуализировать.

И хотя проверка страницы подтверждает, что разметка для модального существует, ничего не происходит, когда я нажимаю ссылку.
Если я перемещаю всплывающее окно из компонента и в DOM, ссылка работает.
Некоторые пробные и ошибки показывают мне, что если я вручную запускаю $(document).foundation(); в консоли при отображении ComponentModal всплывающее окно работает по назначению.

Поэтому мой вопрос - это два вопроса: 1. Как я, в Redux, запускаю $(document).foundation(); когда мой ComponentModal выполняется рендеринг? Возможно, я ошибаюсь, но у меня нет доступного мне метода componentDidMount(), где может быть смысл сделать этот звонок? 2. Является ли это абсолютно неправильным способом?

Надеюсь, что это не слишком запутанный и не слишком тупой вопрос :)

спросил(а) 2021-01-19T20:08:53+03:00 2 месяца, 3 недели назад
1
Решение
62

FYI, этот вопрос/решение не имеет ничего общего с REDUX!

Проблема в том, что вы пытаетесь использовать React AND JQuery, чтобы ваша страница делала что-то классное.

Вы действительно должны выбрать тот или другой.

$(document).foundation() - это библиотека JQuery.

Вместо этого вы должны использовать что-то вроде React Foundation, которое удаляет зависимость jquery и дает вам базовые компоненты, созданные с реакцией.

ответил(а) 2021-01-19T20:08:53+03:00 2 месяца, 3 недели назад
44

Вы можете сделать $(document).foundation() в React внутри componentDidMount компонента, который имеет reval modal или еще лучше. Вы можете сделать это внутри componentDidMount из самого большого числа участников вашего приложения.

componentDidMount in React запускается один раз после установки всех узлов DOM, связанных с этим компонентом. Что такое $(document).foundation(), если он запускается внутри componentDidMount, заключается в том, что он связывает обработчики событий с элементами, которые имеют базовые атрибуты, такие как раскрытие данных или раскрытие данных.

componentDidMount() {
$(document).foundation();
}

ответил(а) 2021-01-19T20:08:53+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема