Задать вопрос
nowm

nowm

Ответы пользователя по тегу React

  • Можно ли вставить виджет на страницу сайта в React?

    nowm
    @nowm
    У Elfsight есть справка на этут тему.

    1. Установите react-elfsight-widget

    npm install react-elfsight-widget

    2. Используйте такой код:

    import React from 'react';
import { ElfsightWidget } from 'react-elfsight-widget';

function Component() {
  return <ElfsightWidget widgetID="хххххххх-хххх-хххх-хххх-хххххххххххх" />;
}


    Соответственно, вместо хххххххх-хххх-хххх-хххх-хххххххххххх подставьте идентификатор вашего виджета.
    Ответ написан
    2 комментария
    2 комментария

  • Стоит ли постоянно использовать css файлы для стилей в React?

    nowm
    @nowm
    Мне нравится вариант с отдельными CSS-файлами или описанием стилей с помощью тега <style>, потому что с их помощью можно работать с псевдо-селекторами, вроде «hover», «before», «after» и так далее. Так же, если использовать методологию БЭМ или подход из Twitter Bootstrap, можно значительно упростить вещи, и тогда вы в JS-коде будете писать логику работы приложения, а не решать вопросы дизайна.

    Плагины, вроде Radium и ему подобных, заставляют писать больше кода и добавляют новые зависимости в проект. Чем меньше кода и зависимостей, тем меньше потенциальных точек отказа и проще обслуживать и развивать приложение.
    Ответ написан
    Комментировать
    Комментировать

  • Почему не работает событие onScroll в React?

    nowm
    @nowm
    onScroll может не работать из-за того, что скроллится не элемент, на который он навешан, а какой-нибудь другой родительский элемент. Например, по-умолчанию, если вы не позаботились отдельно, чтобы скроллился какой-то конкретный элемент, то скролл будет происходить в <body> и передаваться дочерним элементам не будет.

    onWheel срабатывает, когда крутится колесо мыши, и поймать это событие можно тем элементом, на котором находится курсор в момент прокрутки.

    Я надеюсь, вы поняли разницу между этими двумя событиями. Чтобы ловить скролл в данном конкретном случае, нужно удостовериться, что происходит скроллинг именно этого элемента. Например, можно сделать так:

    body {
    max-height: 100vh;
    overflow: hidden;
}

.scrollable {
    max-height: 100vh;
    overflow: scroll;
}


    export default function Home() {
    const handleScroll = event => {
        console.log('scrolling...', event);
    }

    return (
        <div onScroll={handleScroll} className='Home scrollable'>
            <Header/>
        </div>
    );
}
    Ответ написан
    1 комментарий
    1 комментарий