Ответы пользователя по тегу React
  • Что происходит с реактом??

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Упрощу задачу:
    Ответ на вопрос тут: https://learn.javascript.ru/operators#operator-zap....

    И если код из вопроса писали Вы, это значит что Вы не понимаете что пишите. И первым делом чему нужно в таком случае научиться, помимо базы конечно же, это отладке кода: https://learn.javascript.ru/debugging-chrome
    Ответ написан
    Комментировать
  • Перемещение элементов в массиве с одной позицию на другую, как реализовать?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    И если я САМ не могу справиться с такой задачей, то стоит ли делать вывод, что я не осилю даже уровень джуниора попросту потому, что не хватает интеллекта и на программирование стоит забить?

    "Москва не сразу строилась" ©

    На начальном уровне помогает сначала составить алгоритм на естественном языке, или псевдоязыке.
    Например:
    1. Нажал на кнопку
    2. Если кнопка вправо
     2.1 то нужно извлечь последний элемент из массива и вставить его в начало
     2.2 иначе извлечь первый элемент массива и вставить его в конец.


    С алгоритмом определились. Идём изучать методы массивов.
    https://learn.javascript.ru/array-methods

    Видим что:
    arr.push(...items) – добавляет элементы в конец,
    arr.pop() – извлекает элемент из конца,
    arr.shift() – извлекает элемент из начала,
    arr.unshift(...items) – добавляет элементы в начало.

    Отлично. Все они нам как раз и подходяд.

    Переписываем алгоритм на псевдокод
    onClickNext
     var last = array.pop()
     array.unshift(last)
    
    onClickPrev
      var first = array.shift()
      array.push(first)


    Ну и дело за малым. Переписать на js с обработчиками событий и тд.
    Ответ написан
  • Как заставить элемент не рендериться на сервере, но рендериться на клиенте?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Ответ написан
    Комментировать
  • Как правильно дробить на компоненты?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    1) "читсые" компоненты не обязательно про ui.
    2) олдскульное разделение на containers и components. containers - "умные", они же "сложные" компоненты.

    https://habr.com/ru/company/ruvds/blog/446206/

    p.s. не существует "правильно". Нет единственно верного пути.
    Ответ написан
    Комментировать
  • Как при развертывании компоненты из emmet делать самозакрывающийся тег а не?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    В JSX это поддерживается. Так и пишите - Footer/ + tab
    638ccabf9236e471863387.png

    Для простого HTML Emmet такое не поддерживает, насколько мне известно. Разворачивает просто в <Footer>. Возможно, этот конфиг решает вопрос и для HTML.
    Есть команда split/join tag меняет тэг с парного на одиночный. Можно назначить хоткей на это дело. И тогда после разворачивания в парный тэг - хоткеем преобразовывать в одиночный.
    Ответ написан
    5 комментариев
  • Как сделать так чтобы у фоток были свои собственные комментарии а не общие?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    deniskossaa, Ну давайте чуть чуть совсем подумаем.
    Скажем, Вы автовладелец. Как понять что автовладелец именно Вы, а не я? Мы же оба люди, так?
    Где то можно посмотреть, что именно эта машина привязана именно к Вам?

    Дело за малым. Создайте связь между картинками и комментарийями.
    Таким образом, сделаем массив элементов галлереи, каждый элемент которого - объект, у которого есть свойства: src - путь до картинки, comments - массив комментариев к этой картинке, id - уникальный идентификатор картинки для удобства.
    И далее делаем следующую структуру:
    const galleryItems = [
      {
        src: 'http://....' // абсолютный или относительный путь,
        comments: ['Комментарий по умолчанию'],
        id: 1
      },
      {
        src: 'http://....' // абсолютный или относительный путь,
        comments: ['Комментарий по умолчанию ко второй картинке'],
        id: 2
      }
    ]

    Ну собственно и всё. Дальше по факту добавления комментарий находим в массиве по id нужную картинку и добавляем в её поле comments новый комментарий.

    Для ускорения работы можно сделать хэш таблицу
    { [imageId]: galleryItem } // galleryItem - объект из массива
    и тогда по id из хэш таблицы считывать картинку и добавлять комментарий - не будет поиска по массиву на каждое добавление комментария.
    Ответ написан
    Комментировать
  • Почему не работает cheked: !cheked?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Ну наверное потому что так и есть? chekedItem is not defined.
    Где у Вас переменная chekedItem?
    Полагаю, Вы хотели написать chekedItem: !old.chekedItem
    Ответ написан
  • Как верстают сайты на React и Next?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Верстка делается сразу в React компонентах ? Или вначале делается классическая верстка, а потом переносится в React?

    Как Вам удобнее.
    Можно заказать вёрстку на аутсорсе, а потом перевести на реакт. А можно сразу верстать на реакт компонентах.

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

    если сайт на React, там все должно быть на React или допускается сделать некоторые элементы на нативном Js

    Реакт по своей природе - библиотека, которая может быть добавлена на любой сайт.
    Что означает, что у вас может быть 90% статичной вёрстки и 10% на реакте(какие то виджиты, отдельные блоки или сложные формы).
    И наоборот.
    Как и 100% на реакте.
    Ответ написан
    Комментировать
  • При post запросе данные отображаются только после перезагрузки страницы (React). Как исправить?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Ну у вас тут 2 варианта.

    1) После addTask вызывать getAllTasks (2 запроса, но максимально актуальные данные)
    2) в addTask делать не только post на сервер, но ещё и обновлять стэйт. (лучше конечно разделить на 2 функции, чтобы не нарушать принцип единственной ответственности)
    то есть:
    const addTask = async (event) => {
            event.preventDefault();
    
            await API.post("/tasks", {
                title: title
            });
    
            setTasks([...tasks, { title: title }])
        };


    Однако, тут стоит учесть, что если Post запрос не пройдёт, а вы обновите стэйт, то данные будут не актуальные у пользователя. Таким образом, если ваше API.post возвращает промис, то стоит обновлять стэйт в .then(). Ну или через await

    Дальше уже смотрите по ситуации что Вам больше подойдёт.
    Ответ написан
    Комментировать
  • Как отрендерить такой компонент?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Так как код Вы скинули не полный, то и дебажить сложнее. У Вас тут явно не 338 строк кода, на которой показывает ошибку, плюс непонятно откуда берущаяся переменная в cloneDeep.

    Поэтому на глаз: renderопределить как метод, а не как переменную?
    https://ru.reactjs.org/docs/components-and-props.html

    И сделать return из App

    то есть
    // Не так
    render = () => {
    // code...
    }
    
    // А так
    render() {
    // code...
    }
    
    // И так
    function App() {
      return <DragAndDropSidebar/>
    }
    
    // Или так:
    const App = <DragAndDropSidebar/>
    Ответ написан
    4 комментария
  • Как реализовать такое на React или JS?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Ну, испокон веков, когда юзер что-то менял в фильтрах, пагинации и тд то это сохранялось в гет параметрах урла.
    Использование session\local storage тоже приемлемые варианты. Выбор как именно сделать зависит, скорее от ТЗ.
    Но через параметры выглядит, как по мне, более правильным вариантом.
    Ответ написан
  • Как избавиться от начального значение в useState?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    У Вас нет проблемы, которую Вы описали, потому что это работает несколько не так, как Вы, я полагаю, думаете.
    const Logic = () => {
      const [inputValues, setInputValues] = useState('');
      console.log('1)', inputValues);
      const onChangeInput = e => {
        setInputValues((currentState) => {
          console.log('2) current', currentState); 
          return e.target.value});
        console.log('3)', inputValues);
      };
    
      return <View inputValues={inputValues} onChangeInput={onChangeInput} />;
    };
    
    // Будем вводить букву 'a' в инпут. В итоге в консоле получим:
    // 1)"" <-- из-за useState('');
    // 2) current "" <-- так как значение мы ещё не обновили, то получаем то же начальное значение из useState('');
    // 3) "" <-- вызвывается ПОСЛЕ setInputValues, тем не менее, имеет ещё не обновлённое значение.
    // 1) a <-- произошло изменение состояния, компонент перерисовался.


    Дальше, в заивисимости от того, что Вы хотите сделать,
    выводите значение либо в "1)" - это вывод с новым state но перед перерисовкой,
    либо в "3)" Вам нужно выводить e.target.value.

    Операция изменения состояния - асинхронная и реакт может собирать несколько изменений состояния в одно для оптимизации.
    Ответ написан
    Комментировать
  • Как передать функуцию, которая ожидает аргументы в другой компонент?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Пропустили передачу props в конструктор, вызов super(props), метод объявляется немного иначе и пропустили return в render.
    Не проверял на работоспособность, но должно быть как-то так:
    import React from 'react';
    
    class Component1 extends React.Component {
        constructor(props) {
            super(props);
            this.func = this.func.bind(this);
        }
    
        func(name) {
            console.log(`I am ${name}`);
        }
    
        render() {
            return ( <Component2 onOpen = {this.func}/>)
        }
    }
    
    
    class Component2 extends React.Component {
        constructor(props) {
            super(props);
        }
    
        render() {
            return (
                <div onClick={() => {this.props.onOpen('Groot')}}> Who am i ? </div>
            )
        }
    }
    Ответ написан
    Комментировать