• Как из iframe показать модалку на весь экран?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    Да, возможно. После полной загрузки DOM используя JavaScript вы можете отлавливать нажатие на элемент в iframe. А дальше взять URL картинки, присвоить его родительскому окну и открыть в модалке.
    <iframe id="fff"><img src="xxx.jpg"></iframe>
    jQuery('#fff').contents().find('img').attr('src');
    Ответ написан
    Комментировать
  • Как узнать размеры смонтированного в DOM изображения?

    0xD34F
    @0xD34F Куратор тега React
    Повесьте обработчик onLoad, внутри которого доставайте width и height. Например.
    Ответ написан
    Комментировать
  • Как узнать размеры смонтированного в DOM изображения?

    @Dasslier
    FrontEnd Developer
    создайте функцию, которая рендерит изображение.
    const { img } = this.state;
    const image = new Image();
    img.src = image;

    Ширина и высота будут лежать в свойствах image.width и image.height. Но учтите, что загрузка изображения процесс асинхронный, поэтому нужно обращаться к свойствам в image.onload = () => {}
    Ответ написан
    Комментировать
  • Как узнать сколько чилдренов возвращает компонент React?

    Robur
    @Robur
    Знаю больше чем это необходимо
    во время выполнения App у вас еще нет информации о том, будут ли кнопки срендерены или нет. Вы просто возвращаете дескриптор виртуального дерева.
    "рендерить" куда-то в переменную так себе затея.
    Возможные решения
    - выносить логику из врапперов куда-то выше (где вам надо использовать эту информацию). Например , где Wrapper будет просто содержать инфу об условии а фильтрацию непосредственно делать будет WrappersList, поэтому там же можно сделать что-то еще. Либо, как вариант вынести логику из компонент чтобы ее можно было использовать независимо в Wrapper и WrapperList
    - соорудить что-нибудь чтобы передать состояние о том сработал враппер или нет в родительский компонент (колбеки например) и соответственно менять рендеринг в родительском компоненте. Тут главное сделать это аккуратно и без граблей
    Ответ написан
    Комментировать
  • Как спрятать scrollbar в div и отставить возможность скроллинга?

    @saneq1
    scrollbar-width: none; для мозилы
    ::-webkit-scrollbar для остальных
    Ответ написан
    Комментировать
  • Как заставить React перерисовать компонент?

    Robur
    @Robur
    Знаю больше чем это необходимо
    если пропсы и стейт не влияют на результат рендеринга.


    То реакт ничего делать и не должен и "заставлять" его не нужно

    Получите прямую ссылку на DOM ноду, которую вы хотите "перерисовать" и "перерисуйте". Хотя что такое перерисовать при условии что DOM не поменялся?

    Если вы хотите просто выкинуть все и создать заново - то поставьте какому-нибудь блоку key и поменяйте его на любое другое рандомное значение. Дерево пересоздастся.
    Ответ написан
    3 комментария
  • Делают ли так в React?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Так тоже лучше не делать. Такая конструкция и читается хуже и в нее трудней вносить изменения. Хандлеры лучше передавать явно.

    Давайте лучше разберем более приближенный к реальности кейс:
    const Comment = ({ comment, meta, author, postLike, me }) => {
      const [shouldShowReply, setReply] = useState(false);
    
      const toggleReply = useCallback(() => {
        setReply(s => !s);
      }, []);
    
      const handleLikeClick = useCallback(() => {
        postLike(comment.id, me.id);
      }, []);
    
      const isLiked = useMemo(
        () => meta.likes.some(like => like.user_id === me.id),
        [meta.likes],
      );  
    
      return (
        <Wrapper>
          <Avatar src={user.avatar} to={`/users/${user.slug}`} />
          <CommentBody text={comment.body} />
          <Icon name="like" isActive={isLiked} onClick={handleLikeClick} />
          <Button type="link" onClick={toggleReply}>Reply</Button>
          {shouldShowReply && <ReplyForm />}
        <Wrapper/>
      );
    }
    
    const mapStateToProps = (state, ownProps) => ({
      me: meSelector(state),
      author: commentAuthorSelector(state, ownProps),
      meta: commentMetaSelector(state, ownProps),
    });
    
    const mapDispatchToProps = {
      postLike,
    };
    
    export default connect(mapStateToProps, mapDispatchToProps)(Comment);


    Смотрите, что у нас получается, наш комментарий обрабатывает клик по аватару и клики по кнопкам Like и Reply.
    Клик по аватару обрабатывается ссылкой роутера, а благодаря композиции реализация от нас скрыта и мы просто знаем, что в аватар достаточно передать src картинки и ссылку.
    Клик по лайку обрабатывается асинхронной функцией действием, которая подключается с помощью HOC connect.
    Клик по Reply обрабатывается внутренним хандлером компонента и изменяет его состояние.
    На выходе мы имеем интерфейс для комментария подключенного к хранилищу следующего вида:
    <Comment comment={comment} />
    Для не подключенного:
    <Comment
      me={me}
      author={author}
      meta={commentMeta}
      postLike={postLike}
      comment={comment}
    />

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

    Геттеры и сеттеры без необходимости лучше никогда не использовать. Так как они, опять же, затрудняют анализ. Исключение - использование инструментов приветствующих их использование.

    И еще - что лучше тут - бинд или стрелочная функция?

    Это есть в документации.
    Ответ написан
    Комментировать
  • Использовать ли CSS Grid для мелких деталей?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Гриды следует использовать для двухмерной раскладки. Будь то общий лейаут страницы, или какой-то отдельный блок на странице любого размера.
    Ключевое слово — двухмерной.
    Для одномерных подойдут флексы.
    Ответ написан
    Комментировать
  • Как реализовать идею?

    @orbit070
    Как уже говорили, идею вы не запатентуете и не застолбите за собой никак. Если это какие-то конкретные разработки/технологии тогда еще можно, но в случае просто с идеей или новым подходом к чему-то - вряд ли.

    Смысла идти с идеей куда-либо(к инвесторам, в акселераторы и тд) нет, лишний раз расстроитесь.
    Краудфандинг звучит обнадеживающе, но на деле вероятность что-то там привлечь тоже стремится к нулю(если вы не пилите гаджет для гиков или очередную "культовую" игрулю).

    Я бы сделал так:
    1. Проверил свою идею, нужна ли она кому-то. Опросил бы несколько десятков человек, которые занимаются тем, к чему относится ваша идея, и если хотя бы 25%-30% опрошенных с большим энтузиазмом выслушали и сказали, что "было бы круто", то переходил бы к пункту 2.

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

    3. Поняв, какая команда нужна(допустим один программист и один финансист или два программиста и тд), я начал бы искать соответствующих людей, которые увидят потенциал в моей идее и захотят присоединиться. Искать можно на различных сайтах посвященных стартапам, всяких телеграм каналах, группах вк и тд, в общем я бы везде засветился.

    3.1. Если нахожу команду, то делаю мвп, даю опробовать тем людям которые в самом начале увидели пользу в таком продукте, получаю от них первую обратную связь, и уже с этой проделанной работой иду к инвесторам или в акселераторы или еще куда-нибудь, где можно будет привлечь денег и найти способ развиваться.

    3.2. Если не нахожу команду, то решаю для себя, стоит ли игра свеч, и если да, то пытаюсь самостоятельно реализовать прототип. Или его подобие. Что-угодно в любом формате, лишь бы сгенерировать ту ценность, которую должен давать продукт.
    Ответ написан
    Комментировать
  • Стоит ли переходить на React.PureComponent по-умолчанию?

    PQR
    @PQR
    React.PureComponent реализует метод shouldComponentUpdate таким образом, что он делает поверхностное сравнение props и state (не глубокое). Вот собственно код:
    https://github.com/facebook/react/blob/c8fbdac2271...
    shouldUpdate =
                !shallowEqual(prevProps, nextProps) ||
                !shallowEqual(inst.state, nextState);


    Что такое shallowEqual? Это по сути сравнение оператором === каждого элемента из prevProps с каждым элементом из nextProps. На всякий случай дам ссылку на реализацию для полного понимания: https://github.com/facebook/react/blob/6963ea4bfcd...

    В итоге всё зависит от структуры ваших props. Если в props вы передаёте объекты которые иногда мутируются, т.е. по ссылке они равны ===, но внутри какие-то данные поменялись (что само по себе выглядит странно в экосистеме redux + reselect, но вполне возможно технически), тогда использование PureComponent вам всё поломает, т.к. на экране какие-то компоненты перестанут перересовываться!

    Если же у вас всё по уму, данные которые передаются через props являются скалярными типами (string, int, float, bool) или immutable объектами, тогда смело используйте PureComponent - в некоторых случаях он поможет избавиться от лишних вызовов render.

    Важное замечание: PureComponent нужно использовать только для так называемых presentational components, т.е. для тех компонент, которые НЕ обёрнуты в вызов redux connect().

    Для container components (т.е. тех компонент, которые обёрнуты в redux connect()) нет смысла наследоваться от PureComponent, т.к. метод connect() оборачивает ваш компонент своей реализацией shouldComponentUpdate, которая также использует shallowEqual. Если вы по недосмотру унаследуете container component от PureComponent - ошибок не будет, но это не имеет никакого смыла, т.к. ваш код по сути будет дважды делать shallowEqual, а зачем делать лишнюю работу?

    Подводя итог, рецепт такой:
    - presentational components наследуем от React.PureComponent
    - container components (которые обёрнуты в redux connect()) наследуем от старого доброго React.Component
    Ответ написан
    1 комментарий
  • Как встроить React компонент в 1С-Битрикс: Управление сайтом?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    И в чем проблема?

    Шаблон:
    <div id="my-react-module-root"></div>
    <script type="text/javascript" src="my-react-module-bundle.js"></script>


    Точка входа:
    import React from 'react';
    import { render } from 'react-dom';
    import MyReactModule from './MyReactModule';
    
    render(
      <MyReactModule />,
      document.getElementById('my-react-module-root'),
    );
    Ответ написан
    1 комментарий