• Как изменить state в React?

    freislot
    @freislot
    Frontend-разработчик
    так и менять
    this.setState({
      data: {
        text: {
          value: {
            title: 'нужный тайтл'
          }
        }
      }
    })


    setState сравнит состояния и смёржит их, в итоге тайтл изменится а остальные данные останутся как были.


    Извиняюсь не проснулся)) правильно будет так конечно-же

    this.setState(prevState => ({
          data: {
            ...prevState.data,
            text: {
              ...prevState.data.text,
              value: {
                ...prevState.data.text.value,
                title: '1234'
              }
            }
          }
    }))


    Зачеркнул первый вариант ответа, для примера как делать НЕ нужно)

    https://jsfiddle.net/2xe7vpa8/1/

    суть в общем такая, что мы spread'ом копируем состояние объекта и изменяем нужный ключ. Ответ hzzzzl намного короче, но суть та же.
    Ответ написан
    4 комментария
  • Как вести документацию для react компонетов?

    alexiusp
    @alexiusp
    senior frontend developer
    Смотря что вы имеете в виду под документацией и как именно организован проект. Как правильно написали выше - самое главное это документировать логику. Как именно это делать зависит от команды - как удобнее. Скорее всего вы придёте к ридми в репозиториях и/или документам в гуглодоках или конфлюэнс.

    Если у вас проект настолько разросся, что обзавёлся стайл гайдом и настала пора выносить компоненты в отдельную библиотеку, то можно и эту библиотеку задокументировать. Для этих целей мне лично нравится React Styleguidist. Но вам он может и не подойти. Есть и другие альтернативы, достаточно погуглить и попробовать каждую, чтобы понять какая вам удобнее.
    Ответ написан
    Комментировать
  • Как отформатировать массив объектов?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Object.values(arr.reduce((acc, { category, ...n }) => (
      (acc[category.id] ??= { ...category, tanks: [] }).tanks.push(n),
      acc
    ), {}))
    Ответ написан
    Комментировать
  • Используете ли вы React-подход components/containers в проектах?

    TchernyavskD
    @TchernyavskD
    Formoshlep
    Если мы говорим про понятие контейнера в виде реакт - компонента:
    Почитайте Атомик дизайн под Реакт, либо Feature Sliced
    Если совсем проще, то можно достичь, что Реакт будет только для рендера вью, а вся логика уйдет из уровня реакта, либо ее большая часть. Это идеально можно реализовать, например, с effector. Последние полгода нигде нет контейнеров.

    Почему AtomicDesign спасет вашу душу.

    Некоторые считают, что этот подход слишком заморочен. Заставляет много думать о расположении элементов, а при усложнении - перемещать его в другие директории. Если спросить Родионова - найдется ещё несколько причин, почему не надо использовать Atomic Design. В этом посте я хочу рассказать об обратном: как использовать подход Брэда Фроста в React.

    В самом начале необходимо понять - нужен ли вашей команде этот архитектурный дизайн. Достаточно ответить на следующие вопросы:
    - сколько человек будут разрабатывать фронтенд?
    - сколько команд будут использовать ваш код?
    - сколько проектов используют один UI дизайн?
    Если у вас один небольшой проект, в котором всего два фронтендера - вам не нужен AtomicDesign. Если в вашем проекте около 10 фронтендеров и намечается второй проект - нужно задуматься о внедрении AtomicDesign. Тем более если в вашей компании проекты используют общую библиотеку компонентов или планируется внедрение.

    Многие задают мне один и тот же вопрос: "Куда положить компонент X?". Отвечаю сразу для всех компонентов: AtomicDesign - это подход, обеспечивающий вам архитектуру UI компонентов - не более. То есть контейнеры/коннекторы/роутеры вы можете класть в любую директорию, кроме ui. Я всегда рекомендую начать изучение с прочтения книги автора atomicdesign.bradfrost.com, но ниже немного опишу составные части.

    Сразу следует понять, что компоненты AtomicDesign — это бизнес-сущности, это то, чем могут оперировать дизайнеры и разработчики вместе. Не надо включать сюда различные таймеры появления блоков или логику переключения вкладок. Пусть даже они у вас описаны в виде компонентов или HOC'ов.

    Так почему это все спасает души? Чтобы понять ответ, обратимся к ещё одной теме фронтенда: типизированный javascript. Typescript/Flowtype придумали для наложения определенных ограничений на код, чтобы в дальнейшем его было проще поддерживать и читать. AtomicDesign накладывает ограничения на дизайнеров и фронтендеров, обязывая их общаться на одном языке бизнес-сущностей.

    Но необходимо добавить несколько слов о поддержке библиотеки компонентов AtomicKit. В какой-то момент возникает проблема усложнения компонентов, и многие задаются вопросом: "Как же быть, неужели теперь нужно перемещать компонент из атомов в молекулы?" — Нет.
    Перед стартом разработки необходимо тщательно проектировать набор компонентов и не менять его предназначения, пока он существует под таким названием. Если же вам необходимо усложнить компонент, добавить в него какие-то элементы - просто создайте ещё один компонент, который будет добавлять то, что вам нужно. Так вы не сломаете совместимость со всей библиотекой и реализуете необходимую вам фун
    Ответ написан
    1 комментарий
  • Как сделать увеличение картинки при клике?

    hzzzzl
    @hzzzzl
    в стейт аппликации / общего враппера добавь значение типа modalSourceImage: null и меняй его при клике на урл картинки, потом же в рендере что-то в духе <ModalPicture pic={this.state.modalSourceImage} />, а там уже пусть в зависимости от null или не null отрисовывается или нет
    Ответ написан
    Комментировать
  • Как вернуть главное меню в JetBrains Rider?

    Нажмите дважды на Shift, вкладка Аctions. Введите "menu" -- первый результат "View | Appearance: Main Menu" с переключателем
    spoiler

    5e206499c1659675575003.png
    Ответ написан
    5 комментариев
  • Как сделать onChange функцию через redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    export function onChangeUser(value, name) {
      return {
        type:     login.ON_CHANGE_USER,
        fieldName: name,
        value: value
      };
    }
    ...
    case loginActions.ON_CHANGE_USER:
      return {
        ...state,
        [action.fieldName]: action.value
    }
    Ответ написан
    2 комментария
  • Как изменить state в React?

    hzzzzl
    @hzzzzl
    this.setState(state => {
      const newState = { ...state }
      newState.data.text.value.title = 'new title'
      return newState
    })
    Ответ написан
    1 комментарий