Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос
ddimonn8080

Дмитрий

  • 4
    вклад
  • 285
    вопросов
  • 18
    ответов
  • 28%
    решений
Комментарии
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Как создавать комментарии для продукта?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    Рональд Макдональд, то есть все кто оставили комментарий анонимно будут под юзером Аноним с одним и тем же user_id?
    Написано более трёх лет назад
  • Как создавать комментарии для продукта?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    user_id каким образом для него формируется?
    Написано более трёх лет назад
  • Как создавать комментарии для продукта?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    2cha, а если можно оставить комментарий не создавая пользователя?
    Написано более трёх лет назад
  • Почему отображаются не стрелки?

    ddimonn8080
    Дмитрий @ddimonn8080
    anton_trofimov95, Настройки Slick слайдера
    Смотрите параметр nextArrow и prewArrow
    Написано более трёх лет назад
  • Как с помощью .map() превратить массив объектов в объект?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    0xD34F, переколдовал немного вопрос
    Написано более трёх лет назад
  • Как с помощью .map() превратить массив объектов в объект?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    0xD34F, а так?
    Написано более трёх лет назад
  • Как с помощью .map() превратить массив объектов в объект?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    0xD34F, уже
    Написано более трёх лет назад
  • Как инициализировать magnific popup в react компоненте?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    Антон Спирин, решил вопрос. Обернул инициализацию в функцию
    export default function singleProductPopupInit($elem){
        $elem.each(function() {
            $(this).magnificPopup({
                type:'image',
                removalDelay: 500,
                mainClass: 'mfp-fade popup_inline',
                showCloseBtn: true,
                closeMarkup: '<div class="mfp-close">&times;</div>',
                closeBtnInside: true,
                closeOnContentClick: false,
                closeOnBgClick: true,
                alignTop: false,
                fixedContentPos: true,
                callbacks: {
                    open: function() {
                        var headerHeight = $('.header__top').innerHeight();
                        $('.mfp-content').css({
                            'marginTop': headerHeight,
                        });
    
                        var mp = $.magnificPopup.instance,
                            t = $(mp.currItem.el[0]);
    
                        if ( t.data('type') === 'video' ) {
                            if ( !$(this.wrap[0]).find('img.mfp-img').hasClass('has__video') ) {
                                var $imgVideo = $(this.wrap[0]).find('img.mfp-img'),
                                    $dataVideo = $(this.currItem.el).attr('href');
                                $imgVideo.addClass('has__video').attr('data-video', $dataVideo);
                                $imgVideo.parent('figure').addClass('wrap__hasVideo');
                                if ( !$imgVideo.parent('figure').find('.hasVideo__play').length ) {
                                    $imgVideo.parent('figure').append('<div class="hasVideo__play"></div>');
                                }
                            }
                        }
                    },
                    close: function() {
    
                    },
                    beforeOpen: function() {
                        var $triggerEl = $(this.st.el),
                            newClass = 'productsSingle__gallery';
                        this.st.mainClass = this.st.mainClass + ' ' + newClass;
    
                        this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
                    },
                    elementParse: function(item) {
                        item.src = item.el.find('img').attr('src');
    
                    },
                    markupParse: function(template, values, item) {
    
                    },
                    change: function(){
                        var mp = $.magnificPopup.instance,
                            t = $(mp.currItem.el[0]);
    
                        if ( !$(this.content[0]).find('img.mfp-img').hasClass('has__video') ) {
                            $(this.content[0]).find('img.mfp-img').parent('figure').find('iframe').remove();
                        }
    
                        if ( t.data('type') === 'video' ) {
                            if ( !$(this.content[0]).find('img.mfp-img').hasClass('has__video') ) {
                                var $imgVideo = $(this.content[0]).find('img.mfp-img'),
                                    $dataVideo = $(this.currItem.el).attr('href');
    
                                $imgVideo.addClass('has__video').attr('data-video', $dataVideo);
                                $imgVideo.parent('figure').addClass('wrap__hasVideo');
                                if ( !$imgVideo.parent('figure').find('.hasVideo__play').length ) {
                                    $imgVideo.parent('figure').append('<div class="hasVideo__play"></div>');
                                }
    
                            }
                        } else {
                            $(this.content[0]).find('img.mfp-img').parent('figure').removeClass('wrap__hasVideo');
                            $(this.content[0]).find('img.mfp-img').parent('figure').find('.hasVideo__play').remove();
                        }
                    }
                },
                gallery: {
                    enabled:true,
                    navigateByImgClick: false,
                },
                delegate: '.good__gallerySliderItem',
            });
        });
    }

    а при рендере компонента вызываю его в componentDidMount()
    componentDidMount() {
            const {setProductSingle} = this.props;
            const productSlug = this.props.match.params.product;
    
            axios.get(`/api/products/${productSlug}`)
                .then( ({data}) => {
                    setProductSingle(data);
                })
                .then(() => {
                    this.setState({
                        nav1: this.slider1,
                        nav2: this.slider2
                    });
    
                    this.$el = $('.good__gallerySlider .slick-track');
    
                    singleProductPopupInit( this.$el );
                });
        }
    Написано более трёх лет назад
  • Как инициализировать magnific popup в react компоненте?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    Антон Спирин, это не просто, если бы простая галерея была, тогда да, согласен. Здесь стили css, инициализация(просмотрите ее). Все надо переделать заново.
    Написано более трёх лет назад
  • Почему после history.push() не рендерится компонент?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    Антон Спирин, согласен, я только учусь. Тогда вопрос. Вы сказали для запроса. В родительском компоненте я получил все продукты. Вывожу с помощью .map() их список. При рендере страницы одного товара я могу передать в пропасах все товары из родительского. Либо лучше внутри страницы делать отдельный запрос используя slug axios.get()
    для получение всех данных о этом товаре?
    Написано более трёх лет назад
  • Почему после history.push() не рендерится компонент?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    Антон Спирин, только там. Изначально задача была вместо id показывать в адресной строке название товара/статьи. Я нашел как передать дополнительный параметр с помощью компонента <Link />
    Здесь
    теперь ссылка имеет вид
    <Link
           to={{
                    pathname: `${matchPath}/${title}`,
                    title: title,
                    id: id,
                }}
           className="good__itemDescrText"
     >
         {ReactHtmlParser(descrtext)}
     </Link>

    Следующая проблема в том что если я попадаю на страницу товара по ссылке то в адресной строке
    http://localhost:3000/shop/product-name
    в компоненте я получаю доп параметр id и прочее. Но как получить этот id если я перешел на товар не по ссылке а ввел ее в адресной строке напрямую?
    Написано более трёх лет назад
  • Почему после history.push() не рендерится компонент?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    Антон Спирин, Ошибок нет, выводит это
    5c9df3e67fd36926841161.png
    Написано более трёх лет назад
  • Почему после history.push() не рендерится компонент?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    Антон Спирин, если поможет вот ссылка на весь код github repo
    Написано более трёх лет назад
  • Почему после history.push() не рендерится компонент?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    происходит push, url меняется но компонент не рендерится.Но если перезагрузить страницу то рендер срабатывает.
    Написано более трёх лет назад
  • Почему после history.push() не рендерится компонент?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    Антон Спирин, render срабатывает если я перегружаю страницу F5. Я писал выше в вопросе. Может дело в 5-й версии роутера? Она вышла 11 дней назад.
    Написано более трёх лет назад
  • Почему после history.push() не рендерится компонент?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    Антон Спирин, "react-router-dom": "^5.0.0",
    больше нигде не пользовался push,
    Если выводить console.log( history );в productSinglePage получаю следующее
    location:
    hash: ""
    id: 1
    key: "j0o1pv"
    pathname: "/shop/some-product"
    search: ""

    то есть id передается корректно
    Написано более трёх лет назад
  • Почему после history.push() не рендерится компонент?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    Антон Спирин, не мог код добавить, был с телефона. Плюс файл пока в статике - много строк чтобы сюда напрямую вставить. Ссылка на codepen.io
    Написано более трёх лет назад
  • Почему после history.push() не рендерится компонент?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    Антон Спирин, там статика.Обычный класс который возвращает статичную верстку.Пока что.
    Написано более трёх лет назад
  • Как правильно привязать this плюс дополнительные параметри к обработчику клика в React?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    Благодарю
    Написано более трёх лет назад
  • Почему роутинг в react не работает правильно для вложенных роутов?

    ddimonn8080
    Дмитрий @ddimonn8080 Автор вопроса
    Антон Спирин, разобрался в чем проблема. Все из-за относительного пути вместо
    <img src="uploads/2018/07/header_logo.png" alt="logo" className="headerMiddle__img" />
    надо
    <img src="/uploads/2018/07/header_logo.png" alt="logo" className="headerMiddle__img" />
    Написано более трёх лет назад
  • ← Предыдущие
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • Следующие →
Самые активные сегодня
  • Drno
    • 8 ответов
    • 0 вопросов
  • Rsa97
    Rsa97
    • 6 ответов
    • 0 вопросов
  • sergey-gornostaev
    Сергей Горностаев
    • 5 ответов
    • 0 вопросов
  • alexey-m-ukolov
    Алексей Уколов
    • 4 ответа
    • 0 вопросов
  • Михаил
    • 4 ответа
    • 0 вопросов
  • Никита Савченко
    • 2 ответа
    • 2 вопроса
  • © Habr
  • О сервисе
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации