Контакты

Достижения

Все достижения (2)

Наибольший вклад в теги

Все теги (9)

Лучшие ответы пользователя

Все ответы (8)
  • Как выровнять внутренние элементы в соседних блоках?

    usyninis
    @usyninis
    react-эксперт
    довольно частая задача во фронтенде - обычно решается совместно с дизайнерами, тк ориентироваться на соседние блоки - это всегда ущерб для текущего элемента (при названии фильма в одну строчку - он в любом случае будет отличаться от названия в 2 и более строки), поэтому оптимальным решением всегда считалось следующее:
    для заголовка всегда выделяем высоту в 2 строки - все что больше 2х строк уходит в троеточие
    5c51aa3ea6b88197998358.png
    Ответ написан
    Комментировать
  • Как плавно удалить блок?

    usyninis
    @usyninis
    react-эксперт
    удаление должно проходить в 2 этапа:

    1. помечаешь удаляемый элемент спец флагом "isDeleted" (в этом состоянии средствами css запускаешь анимацию исчезновения)
    2. по окончании анимации удаляешь элемент из state полностью

    ...
    onDeleteItem(index) {
      const users = this.state.users;
      users[index].isDeteted = true;
      this.setState({
        users,
      });
      setTimeout(() => {
        users.splice(index, 1);
        this.setState({
          users,
        });
      }, 300);
    }
    ...
    {this.state.users.map((user, index) => (
      <UserItem 
        className={user.isDeteted ? 'class-for-deleted' : ''} 
        onDelete={this.onDeleteItem.bind(this, index)} 
      />
    ))}
    ...


    уровень senior: в данном механизме асинхронное изменение state, поэтому для стабильно работающего кода необходимо добавить проверку, что процесс удаления закончился (чтобы не было коллизий между несколькими быстрыми кликами "удалить"), а так же на существование текущего компонента (что он не размонтировался из dom-дерева)
    Ответ написан
    Комментировать
  • Angular + Webpack + SCSS + Autoprefixer?

    usyninis
    @usyninis
    react-эксперт
    у тебя в конфиге стоит exclude: path.resolve(__dirname, 'src/app'), - это означает что для файлов типа test: /\.(css|sass|scss)$/, в указанной папке у тебя не будет срабатывать данное правило

    В ошибке мы видим путь как раз к файлу, который лежит в исключенной папке:
    ERROR in ./src/app/app.component.scss 1:3

    поменяй exclude на include, либо совсем убери (зависит от того, есть ли еще в других папках используемые файлы css|sass|scss)
    Ответ написан
    2 комментария
  • Как правильно отрендерить данные на react с разрывом?

    usyninis
    @usyninis
    react-эксперт
    добавляем разделитель по нужному индексу:

    import { Fragment } from 'react'; // подключаем react fragment
    ....
    // перед 3-им индексом, вставляем разделитель, индексы нумеруются от 0
    render() {
      return (
        <div>
          {
            this.props.data.map((item, index) => {
              console.log('item', item);
              return (
                <Fragment key={item.id}>
                  {index === 3 && ( 
                    <div>
                      разделитель
                    </div>
                  )}
                  <div key={item.id}>
                    {item.title}
                    {item.round.map((r) => {
                      console.log('r', r);
                      return (
                        <div key={r.id}>
                          {r.total}
                        </div>
                      )
                    })}
                  </div>
                </Fragment>
              )
            })
          }
        </div>
      )
    }
    Ответ написан
    Комментировать

Лучшие вопросы пользователя

Все вопросы (2)