Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос
pterodaktil

Петр Мухуров

js developer
  • 45
    вклад
  • 6
    вопросов
  • 53
    ответа
  • 62%
    решений
Ответы
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Как обновить данные используя setState?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    this.setState({
      data: [
        ...data.slice(0, data.length - 1),
        { ...data[data.length - 1], year: "2141" }
      ]
    });

    или гибче
    this.setState({
      data: data.map((item, index, source) =>
        index !== source.length - 1 ? item : { ...item, year: "2141" }
      )
    });

    или справа
    this.setState({
      data: data.reduceRight(
        (acc, item, index) => [
          ...acc,
          index !== 0 ? item : { ...item, year: "2141" }
        ],
        []
      )
    });

    а можно слева
    this.setState({
      data: data.reduce(
        (acc, item, index, { length }) => [
          ...acc,
          index !== length - 1 ? item : { ...item, year: "2141" }
        ],
        []
      )
    });

    а можно пофантазировать
    this.setState({
      data: Array.from(
        { length: data.length },
        (n => () => (
          n++, n !== data.length - 1 ? data[n] : { ...data[n], year: "2141" }
        ))(-1)
      )
    });
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как правильно отправить асинхронный запрос в useEffect?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    код, который позволяет проверить, вмонтирован ли компонент в DOM, перед тем, как делать setState
    const isMounted = useIsMounted();
    
    useEffect(() => {
    ...
      if (isMounted()) {
        setImg(data);
        setPreloader(!preloader);
      }
    ...
    }, [])

    позволяет предотвратить ошибку, когда компонент умер, а запрос еще не отработал
    Ответ написан более трёх лет назад
    3 комментария
    3 комментария
  • Автоматически увеличивающаяся строка поиска, когда текст заполнил её полностью. Как создать?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    <div contentEditable="true" />
    Фиксируете ему ширину и отпускаете высоту - все работает. Проблемы стилизовать под инпут нет
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как сделать сокращенный путь до папки в реакте?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    webpack.config.js
    resolve: {
        alias: {
          components: path.resolve(__dirname, "./src/components")
        }
      }
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как правильно вывести данные из массива?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    `${a.slice(0, 5)},<strong>${a.slice(5, 7)}</strong>`
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как исправить ошибку после удаления return?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    {this.props.items.map((n, i) => (
                <button
                  data-index={i}
                  onClick={e => this.props.changeTab(+e.target.dataset.index)}>
                  {n.content}
                </button>
            )}
    Ответ написан более трёх лет назад
    2 комментария
    2 комментария
  • Как добавить минификацию в webpack?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    const config = {
     ...
     optimization: {}
    };
    
    if (process.env.NODE_ENV === "production") {
      config.optimization.minimizer = [
        new UglifyJsPlugin({
          sourceMap: true,
          parallel: true,
          uglifyOptions: {
            compress: {
              drop_console: true
            }
          }
        })
      ];
    }
    
    module.exports = config;
    Ответ написан более трёх лет назад
    2 комментария
    2 комментария
  • Как получить данные с хранилища MobX?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    вообще говоря, можно достучаться напрямую
    user.activeCabinet

    toJS
    либо spread
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как в react изменить текст в зависимости от значения?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    const color = this.state.petrol > 0 ? "#FFF" : "#D12828";
    
    return (
      <p style={{ color }}>{this.state.petrol}</p>
    );
    Ответ написан более трёх лет назад
    4 комментария
    4 комментария
  • Как в moment.js сделать время обновляющиеся?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    render() {
        return (
          <Moment interval={1000} />
        );
      }
    Ответ написан более трёх лет назад
    3 комментария
    3 комментария
  • Как переключать стили разным компонентам?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    в NewsBigScreen абсолютно бесполезно display/setDisplay/useState
    const NewsElement = (props) =>{
      ...
      return(
        ...
          <NewsBigScreen display={display} setDisplay={setDisplay} />
        ...
      )
    }
    
    const NewsBigScreen = ({ display, setDisplay }) =>{
      const closeBigScreen = () =>{
          setDisplay('none')
      }
    
      return(
        <div className='newsBigScreenWrap' style={{display: display}}>
          <div className='blackBackground'>
          </div>
          <div className='NewsBigScreen' >
            <input type='submit' onClick={closeBigScreen}/>
          </div>
        </div>
      )
    }
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как рисовать мышкой поверх блоков?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    А в чем проблема натянуть канвас на экран с position: absolute и рисовать на нем?
    5d5bc3c3e7972479628651.jpeg
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как заставить select2 не игнорировать вложенные в option теги?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    docs
    Ответ написан более трёх лет назад
    2 комментария
    2 комментария
  • Кто может проверить грамотность кода?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    function fearNotLetter(str) {
      const letters = str.split("");
      
      const letter = letters.reduce((acc, letter, index) => {
        if (acc !== undefined) return acc;
    
        const prevLetterCode = (letters[index - 1] || letter).charCodeAt();
    
        if (letter.charCodeAt() - prevLetterCode  > 1) return String.fromCharCode(prevLetterCode  + 1)
    
        return undefined;
      }, undefined);
    
      return letter;
    }
    
    fearNotLetter("abce");
    //d
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Почему некорректно отображается страница в Mozzila Firefox(Fullpage.js+bootstrap)?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    Зачем вам display: table?
    .fp-section.fp-table, .fp-slide.fp-table {
        /*! display: table; */
        table-layout:fixed;
        width: 100%;
    }

    С введением флексов верстать одно удовольствие. В инспекторе снимите галку с display: table; и смотрите
    P. S. Заодно скрипты подебажьте, падают ошибки
    Ответ написан более трёх лет назад
    5 комментариев
    5 комментариев
  • Как переопределить стили less в create react app?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    нужно подключать less в своем less файле
    @import "~antd/dist/antd.less";
    // твои переменные для переопределения
    // или импорт файла с твоими переменными/стилями

    и уже этот файл импорти в индекс
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Автообновление сборки (webpack) при изменение .scss?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    чтоб прям вот как надо)
    const env = process.env;
    const __DEV__ = env.NODE_ENV === "development";
    
    const BASE_CSS_LOADER = {
      loader: "css-loader",
      options: {
        importLoaders: 2,
        sourceMap: true,
        minimize: true
      }
    };
    const CSS_MODULES_LOADER = {
      loader: "css-loader",
      options: {
        importLoaders: 2,
        localIdentName: "[name]__[local]___[hash:base64:5]",
        modules: true,
        sourceMap: true,
        minimize: true
      }
    };
    const POSTCSS_LOADER = {
      loader: "postcss-loader",
      options: {
        sourceMap: true,
        plugins: [autoprefixer],
        minimize: true
      }
    };
    const STYLE_LOADER = __DEV__ ? "style-loader" : MiniCssExtractPlugin.loader;
    config.module.rules = [].concat(config.module.rules, [
      {
        test: /\.module\.scss$/,
        use: [
          STYLE_LOADER,
          CSS_MODULES_LOADER,
          POSTCSS_LOADER,
          "sass-loader?sourceMap"
        ]
      },
      {
        test: /\.module\.css$/,
        use: [STYLE_LOADER, CSS_MODULES_LOADER, POSTCSS_LOADER]
      },
      {
        test: /\.scss$/,
        exclude: /\.module\.scss$/,
        use: [
          STYLE_LOADER,
          BASE_CSS_LOADER,
          POSTCSS_LOADER,
          "sass-loader?sourceMap"
        ]
      },
      {
        test: /\.less$/,
        exclude: /\.module\.less$/,
        use: [
          STYLE_LOADER,
          BASE_CSS_LOADER,
          POSTCSS_LOADER,
          "less-loader?sourceMap"
        ]
      },
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [STYLE_LOADER, BASE_CSS_LOADER, POSTCSS_LOADER]
      }
    ]);
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как оцентровать тики в recharts?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    Нашел такой вариант
    const CustomizedAxisTick = ({ x, y, stroke, payload }) => (
      <g transform={`translate(${x + delta},${y})`}>
        <text x={0} y={0} dy={16} textAnchor="start" fill="#666">{payload.value}</text>
      </g>
    );
    ...
    <XAxis dataKey="name" height={60} tick={<CustomizedAxisTick/>}/>
    ...

    дельту можно подобрать
    Ответ написан более трёх лет назад
    3 комментария
    3 комментария
  • Как бы выглядел этот код без хуков (hooks) и с компонентами класса, а не с функциональными компонентами?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    class Slider extends Component {
      state = {
        active: 0
      };
    
      componentDidMount() {
        const { items } = this.props;
    
        this.timeout = setTimeout(
          () => this.updateActive(this.state.active, 1, items.length),
          5000
        );
      }
      componentDidUpdate(prevProps, prevState) {
        const { items } = this.props;
        const { active } = this.state;
    
        if (
          prevState.active !== active ||
          prevProps.items.length !== items.length
        ) {
          clearTimeout(this.timeout);
          this.timeout = setTimeout(
            () => this.updateActive(active, 1, items.length),
            5000
          );
        }
      }
      componentWillUnmount() {
        clearInterval(this.timeout);
      }
    
      updateActive = (active, step, length) => {
        this.setState({
          active: step ? (active + step + length) % length : active
        });
      };
      next = e =>
        this.setState({
          active: this.updateActive(
            this.state.active,
            +e.target.dataset.step,
            this.props.items.length
          )
        });
      goTo = e => this.updateActive(+e.target.dataset.index);
    
      render() {
        const { active } = this.state;
        const { items } = this.props;
    
        const { length, [active]: slide } = items;
    
        return (
          <div>
            <div className="slideshow-container">
              <div className="mySlides fade">
                <div className="numbertext">
                  {active + 1} / {length}
                </div>
                <img src={slide.img} />
                <div className="text">{slide.title}</div>
              </div>
              <a className="prev" onClick={this.next} data-step={-1}>
                &#10094;
              </a>
              <a className="next" onClick={this.next} data-step={+1}>
                &#10095;
              </a>
            </div>
            <div className="dots">
              {items.map((n, i) => (
                <span
                  key={n.id}
                  className={`dot ${i === active ? "active" : ""}`}
                  onClick={this.goTo}
                  data-index={i}
                />
              ))}
            </div>
          </div>
        );
      }
    }
    Ответ написан более трёх лет назад
    8 комментариев
    8 комментариев
  • Не могу пройти челендж ...?

    pterodaktil
    Петр Мухуров @pterodaktil
    js developer
    watchList.filter(({ imdbRating }) => +imdbRating > 8).map(({ title, rating }) => ({ title, rating }))
    Ответ написан более трёх лет назад
    3 комментария
    3 комментария
Оценили как «Нравится»
  • 1
  • 2
  • 3
  • Следующие →
Самые активные сегодня
  • Drno
    • 11 ответов
    • 0 вопросов
  • vabka
    Василий Банников
    • 9 ответов
    • 0 вопросов
  • vovka3003
    Владимир Шаблий
    • 8 ответов
    • 0 вопросов
  • gim0
    Андрей Мывреник
    • 5 ответов
    • 0 вопросов
  • Инна Фещук
    • 5 ответов
    • 0 вопросов
  • CityCat4
    CityCat4
    • 4 ответа
    • 0 вопросов
  • © Habr
  • О сервисе
  • Правила
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации