Задать вопрос
Ответы пользователя по тегу React
  • Почему не получается передать компонент через свойство?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Используйте наименование компонентов с заглавной буквы, в ином случае, реакт будет считать его не парным тегом:
    function Box() {
      return (
        <>
          <p>Box Component</p>
        </>
      );
    }
    
    function List({Component}) {
      return (
        <>
          <Component/>
        </>
      );
    }
    
    function App() {
      return (
        <List Component={Box}/>
      );
    }
    
    export default App;

    Либо:
    function List({component: Component}) {
    Ответ написан
  • Как вообще пользоваться .module.css в React?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    как сделать так что бы в одном html элементе был 2 класса например обычно className={isActive ? "page : ""page active"} можно добавить дополнительный класс а как сделать на .module ?

    import styles from 'Button.module.css';
    import cx from 'classnames';
    
    <button className={cx(styles.button, styles.disabled)}>Button</button>

    Гугл пробовали? Первые 2 строки Using CSS Modules in React, Css Modules by Example.
    Ответ написан
    Комментировать
  • Как вам аргумент за выбор React Query вместо RTK Query?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    https://ru.stackoverflow.com/questions/1529010/rea...

    https://www.reddit.com/r/reactjs/comments/15ucdx7/...
    acemarke

    Hi, I'm a Redux maintainer.

    Both the Redux and React Query teams recommend that:
    - If you are using Redux in the app, you should use RTK Query for your data fetching.
    - Otherwise, you should use React Query for you data fetching.

    But mixing Redux + React Query doesn't make any sense.
    Ответ написан
    Комментировать
  • React Graphql в чем ошибка?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    react-apollo@3.1.5 требует @types/react ^16.8.0, но Ваш проект использует @types/react@18.3.3.

    react-apollo project is deprecated
    Попробуйте @apollo/clien вместо react-apollo.
    Ответ написан
    Комментировать
  • React Effector почему count не увеличивается и не передается в компоненте?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    // const count = counter.getState().count
    const count = useStore(counter).count;
    Ответ написан
    Комментировать
  • Сложно ли проект на react переиспользовать в react native?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    возможно ли поддерживать один код для React и React Native чтобы не переписывать заново?

    5-20% наверняка придётся переписать, в зависимости от тз.
    Или это что-то похожее названиями, но настолько разное как Java и Java Script? :)

    Нет.
    И если переписывать с нуля, вообще хорошая ли практика использовать React Native? Может лучше Flutter? Буду благодарен за мнения.

    Зависит от задачи. Если Ваша команда уже использует React, то для MVP, использование RN - отличное решение.
    p.s. Не знаю играет ли это какую роль, но при написании react проекта использовался TypeScript

    React Native TS
    Ответ написан
  • Какая альтернатива в React событию onchange в input type="range"?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    <Element
        type="range"
        value={value}
        onChange={handlerChange}
        onMouseUp={handlerEndInteraction}
        onTouchEnd={handlerEndInteraction}
    />
    Ответ написан
    5 комментариев
  • Как лучше загрузить сайт на React на GitHub для доказательства, что он действительно на React?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    этот вопрос у меня относится к удобству чтения кода и просмотра сайта другими пользователями, чтобы они удостоверились в разработке на React.

    В репу заливается весь проект, исключая зависимости, так, чтобы можно было скопировать проект себе на локалку, поставить зависимости и:
    - Запустить в режиме разработки одной командой.
    - Собрать проект одной командой.
    - Выполнить тесты одной командой.

    Либо, чтобы из репы можно было скопировать лишь dist/ и сразу опубликовать это как приложение в любом месте, без дополнительных команд.
    От такого способа не будет видно, что применялся Реакт?

    Слепой не увидит ничего, в остальном - все чекается на раз-два.

    Рекомендую изучить крупные репы и обратить внимание на то, что там в рамках одной репы имеются исходники (src), сборки разных видов (dist/build), опубликованы все необходимые команды так, чтобы даже не зрячая обезьянка могла скопировать и выполнить эту команду, чтобы получить желаемый результат.
    Ответ написан
    1 комментарий
  • Как в next js добавить класс к элементу?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Как в обычном реакте:
    const Icon = ({title, href, active}) => {
        const className = active ? 'active' : '';
    
        return (
            <Link href={href} className={`svgh m-auto ${className}`}>
                {/* svg */}
            </Link>
        );
    }

    'use client'
    import React, {useState, useEffect} from 'react';
    import Icon from './icons/Icon';
    
    const links = [
        {href: '#home_anchor', svgIcon: 'home'},
        {href: '#user_anchor', svgIcon: 'user'}
        // others
    ];
    
    const Navbar = () => {
        const [activeLink, setActiveLink] = useState('');
    
        useEffect(() => {
            const handleScroll = () => {
                // logic scroll
            }
    
            // add anchor
            window.addEventListener('scroll', handleScroll);
    
            // remove anchor from unmount
            return () => window.removeEventListener('scroll', handleScroll)
    
        }, []);
    
        return (
            <nav className="flex flex-col fixed bg-gray-800 align-center">
                {links.map((l) => (
                    <Icon href={l.href} key={l.svgIcon} title={l.svgIcon} active={activeLink === l.href}/>
                ))}
            </nav>
        );
    }
    Ответ написан
    1 комментарий
  • Реализация поиска только внутри модального окна?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Есть какие-то варианты решения данной проблемы? Знаю что можно впихнуть кастомный поиск и отменить эвент ctrl + f.

    Нативного - не встречал, только перехват и прослушка комбинации ctrl + f.
    Ответ написан
  • Как избавиться от моргания блоков при их смене после подгрузок данных с сервера?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Моргает он потому, что в момент отрисовки старый уже удален, а новый еще не отрисован. Варианты решения:
    - Убедиться точно, что новый контент загружен и лишь затем его выводить. Если контент будет слишком тяжелый для устройства клиента, то этот метод не сработает, т.к. устройству еще понадобится время для его рендера, т.е. моргание будет заметно.
    - Добавить некий loading в место, где ожидается появление новых данных.

    Как вариант, вместо пустого дива:
    <section>
        <div ref={tables} className={style.tableWrapper}>
            {isLoading ? createTable(currentTable) : createTable(table)}
        </div>
    </section>
    Ответ написан
  • Как создать свой элемент для каждого элемента из массива?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Как создать свой элемент для каждого элемента из массива?

    Но в итоге ничего не создается

    А че forEach() возвращает что то? Может map()?
    Ответ написан
    Комментировать
  • Почему при разном подходе отправки запроса не появляется response в консоли?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    1. await axios.post().then(), точно правильно?
    2. request_json точно в нужном месте axios.post()?

    Если попробовать так?
    try {
        const res = await axios.post(
            'https://jsonplaceholder.typicode.com/posts',
            JSON.stringify(sendData),
            {
                headers: {'Content-Type': 'application/json'}
            }
        );
    
        console.log(res.data);
    
    } catch (error) {
        console.error('Error: ', error);
    }

    onClick на сабмите и без preventDefault, страница перезагрузится и Вы можете не увидеть ответ в консоль.
    Ответ написан
    Комментировать
  • Можно ли удалить файл theme.min.css из dev сборки?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    а менять его неправильно. так как бы временный

    Это не временный, а минимизированный и постоянный css файл для продакшен ветки (по крайней мере так они именуются).
    Можно ли удалить файл theme.min.css из dev сборки?

    Вообще, визуально, файл похож на итоговый минимизированный css файл для продакшена, НО! Зависит от контекста конкретного проекта, вполне можно случиться так, что:
    - Предыдущий разраб так назвал постоянный файл для dev ветки.
    - Файл участвует как часть в scss или js при сборке.

    Чтобы убедиться точно, перенесите проект в тестовую директорию и запустите dev ветку без этого файла, проверьте в консоли браузера, нет ли ошибок подключения этого файла, если все ок - то все ок.
    Ответ написан
  • React-Select. Что может мешать выбору элементов с клавиатуры?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Как минимум, имеется несколько вариантов, кто мог повлиять на клаву:
    - Имеется ли aria-disabled=true? Попробуйте false.
    - Попробуйте
    - blurInputOnSelect
    - pageSize
    - onKeyDown
    Ответ написан
    Комментировать
  • Как предотвратить перенос компонентов на новую строку в React BootStrap?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    если бы это было написано на чистых гридах все бы было ок. но это Bootstrap 5

    Так прикрутите класс и допишите "чистых гридов":
    .items {
        grid-auto-columns: 100px;
        grid-auto-flow: column;
    }
    Ответ написан
    4 комментария
  • Как написать функцию для обновления списка комнат для single-page application?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Если я правильно понял вопрос, то Вам нужно чистить state между переходами?
    const prevPathname = useRef(pathname);
    
    useEffect(() => {
        if (pathname !== prevPathname.current) {
            dispatch(resetRooms());
        }
    
        prevPathname.current = pathname;
    }, [pathname, dispatch]);
    Ответ написан
    3 комментария
  • Как работают SSR компоненты?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Если я правильно понимаю работу Next.js: компоненты без состояния рендерятся на сервере и могут индексироваться поисковыми роботами

    Верно, индексация стандартная.
    А с состоянием - на стороне клиента, и роботы их не видят.

    Не совсем. Поисковики индексируют динамику, но ограниченно, и она проиграет классической статике или ssr. То, что Вы видите динамику в топе - это не заслуга динамики, а недоработка конкурентов со статикой.
    Однако в компоненте самой страницы ArticlePage у меня в любом случае будет использование useState. Значит ли это, что вся страница будет отрисовываться на клиенте?

    Не совсем. Часть страницы будет отрисована на сервере, а часть на клиенте.
    И что поисковые роботы обойдут контент страницы стороной?

    Нет, контент в любом случае будет ранжироваться, но не лучше классической статики при прочих равных.
    P.S. Вопрос, возможно, глупый, но я правда не понимаю...

    К нексту у многих имеются вопросы, поэтому Вы не первый и уж тем более, не последний :)
    Ответ написан
    Комментировать
  • Можно ли автоматически урезать качество изображений в React?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Если я буду помещать большое изображение в маленькие карточки, картинка будет искажаться, а мне этого не нужно.

    CSS object-fit.
    либо же это должно происходить на сервере?

    На сервере, сразу получать изображение необходимого размера.
    Ответ написан
    Комментировать
  • Откуда React берет объект для инициализации хуков без пути к нему?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Реакт использует контекст, чтобы управлять хуками и их состоянием. Когда компонент реакта рендерится, реакт устанавливает ReactCurrentDispatcher (текущий диспетчер хуков) в соответствующий объект диспетчера для этого рендера. Это позволяет хукам (например, useState) обращаться к текущему состоянию и методам жизненного цикла компонента без необходимости явно передавать какие либо ссылки на компоненты или их состояние.

    https://github.com/facebook/react/issues/14022#iss...
    Переменная ReactCurrentDispatcher.current по умолчанию имеет значение null, потому что вне контекста рендера компонента использование хуков не имеет смысла. Если Вы попытаетесь использовать хук вне компонента (в обычной функции JavaScript), ReactCurrentDispatcher.current будет null, что приведет к ошибке, указывающей на неверный вызов хука.

    Реализация хуков находится в исходном коде реакта. Там же можно посмотреть, как реакт реализует useState и прочие хуки.

    How hooks work | How React Works
    Заметка о том, как работают хуки в React
    Первое погружение в исходники хуков
    Ответ написан
    4 комментария