• Как передать props через Link в react-router?

    DarthJS
    @DarthJS
    1) Найти
    либо
    2) to={{
    path: "/search",
    query: {searchValue:searchValue}
    }} >Найти

    второй если redux используется
    Ответ написан
    1 комментарий
  • Как передать props через Link в react-router?

    @Pirantul
    Frontend-разработчик
    Данные из одной страницы в другую, через Link передаются таким образом,
    на первой странице:
    <Link to={{
                pathname: "/search",
                propsSearch: myData
            }}>Ссылка</ Link>

    На странице "/search" данные можно достать так:
    import React from 'react';
    import {Redirect} from 'react-router-dom';
    
    export default function Search(props) {
       console.log(props.location.propsSearch); // Наши переданные данные
       //Но учтите, что они будут доступны только, при переходе по этой ссылке. 
       //Если страницу перезагрузить, то получим - undefined. 
       //Это решается редиректом обратно, если нет пропса:
       if (!props.location.propsSearch) return <Redirect to="/firstpage" />;
    ...
    }
    Ответ написан
    Комментировать
  • Изменение внешнего вида кнопок и фиксация его состояния. Как зафиксировать состояние кнопки?

    Raxen
    @Raxen
    TechLead Frontend Developer, Beeline
    При рендере проверяй добавлен ли элемент в избранное, если да - вешай класс "btn--active" например на кнопку с сердцем, и по клику на этой кнопке сделай переключение активного класса
    Ответ написан
    Комментировать
  • SVG иконки на сайте. Как правильно вставлять?

    @FabiBoom
    • Вставка через элемент img - если у вас изображение контентное (содержат важное для пользователя), например логотип.
    • Вставка через в качестве background-image: url() - если у вас изображение декоративное (обычные иконки, как у ваших примерах) и никак не изменяется при взаимодействии с пользователем (об этом ниже). Например, для простых иконок к заголовкам разделов можно использовать псевдоэлементы ::after и ::before + background-image c урлом на свгшку. Не засоряет таким образом разметку.
    • Вставка через элемент svg прямо в код - если у вас изображение декоративное и нужно будет при каких-то условиях, например, изменить заливку свгшки или цвет обводки с помощью CSS. Например, красная иконка в кнопке при наведении на кнопку становиться белой. Проблема в том, что, чтобы изменить ее цвет через CSS способом с псевдоэлементом мы можем только заменив на другую такую же картинку, но с белым цветом. А можно при наведении сделать так:
      button:hover svg {
         fill: white;
      }

      И все - обратиться к этой иконке и залить ее белым цветом. Поэтому, чтобы управлять возможностями свгшек через стили эта SVG должна быть именно в разметке.

    Вариантов использования много и тут следует смотреть по конкретной ситуации.
    Есть еще возможность не добавлять весь свг код в разметку, а использовать свг спрайты, что очень рекомендую. Ими тоже отлично управлять через CSS, упрощает разметку, особенно, если какая-то иконка используется многократно. Вот пара ссылок:
    Раз
    Два
    Ответ написан
    Комментировать
  • Почему видны тени у дочерних элементов?

    hzzzzl
    @hzzzzl
    если overflow не hidden, то ничто не мешает дочернему диву вылезать за пределы родителя

    Ответ написан
    Комментировать