Ответы пользователя по тегу React
  • Как заменить свойство объекта внутри объекта state?

    sharpfellow
    @sharpfellow
    Front
    Надо переписать объект sms

    someFunction = () => {
          const {sms} = this.state;
          sms.disabled = true;
          this.setState({sms});
    }

    Таким образом вы обновите поле disabled в sms
    --------
    Или еще так
    someFunction = () => {
          this.setState({sms: {...this.state.sms, disabled: true}});
    }

    --------
    еще так можно
    someFunction = () => {
          this.setState(prevState=>({sms: {...prevState.sms, disabled: true}}));
    }

    Последний вариант самый устойчивый к коллизиям, связанным с изменением стейта в других места программы
    Ответ написан
    1 комментарий
  • Как добавить поддержку stylus в react-create-app проект?

    sharpfellow
    @sharpfellow
    Front
    1. Выполнять команду npm run eject, которая добавит все зависимости и конфиги в проект. Отменить нельзя
    2. npm i --save-dev stylus stylus-loader
    3. Дальше добавляем в webpack настройки обработку stylus (необходимо добавить и в development, и в production)

    webpack.config -> module -> rules -> oneOf
    developement - добавляем новое правило
    {
                test: /\.styl$/,
                use: [
                  require.resolve('style-loader'),
                  {
                    loader: 'css-loader',
                    options: {
                      // можно удалить, если не нужны css модули
                      modules: true,
                      localIdentName: '[name]__[local]--[hash:base64:5]',
                      camelCase: true,
                      sourceMap: true,
                    },
                  }, {
                    // postcss-loader и autoprefixer уже есть в create-react-app
                    loader: 'postcss-loader',
                    options: {
                      plugins: () => [
                        autoprefixer({ browsers: ['>= 10%', 'last 2 versions'] })
                      ],
                      sourceMap: true,
                    },
                  }, {
                    loader: 'stylus-loader',
                    options: {
                      sourceMap: true,
                    },
                  }],
              },

    production - редактируем обработку стилей на
    {
                test: /\.(styl|css)$/,
                loader: ExtractTextPlugin.extract(
                  Object.assign(
                    {
                      fallback: {
                        loader: require.resolve('style-loader'),
                        options: {
                          hmr: false,
                        },
                      },
                      use: [
                        {
                          loader: require.resolve('css-loader'),
                          options: {
                            importLoaders: 1,
                            minimize: true,
                            sourceMap: shouldUseSourceMap,
                          },
                        },
                        {
                          loader: require.resolve('postcss-loader'),
                          options: {
                            // Necessary for external CSS imports to work
                            // https://github.com/facebookincubator/create-react-app/issues/2677
                            ident: 'postcss',
                            plugins: () => [
                              require('postcss-flexbugs-fixes'),
                              autoprefixer({
                                browsers: [
                                  '>1%',
                                  'last 4 versions',
                                  'Firefox ESR',
                                  'not ie < 9', // React doesn't support IE8 anyway
                                ],
                                flexbox: 'no-2009',
                              }),
                              cssMQPacker(),
                            ],
                          },
                        },
                        {
                          loader: require.resolve('stylus-loader'),
                          options: {
                            minimize: true
                          }
                        }
                      ],
                    },
                    extractTextPluginOptions
                  )
                ),
                // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
              },
    Ответ написан
    Комментировать
  • Почему не изменяется состояние компонента?

    sharpfellow
    @sharpfellow
    Front
    Вы используете this.setState в function ,
    response.json().then(function(data)
    у которой свой this, а не this класса LibraryContent.

    Надо заменить на стрелочную функцию, как выше
    .then(response => {

    console.log("Эта строка в консоль уже не выводится");

    Это не выполняется, так выше у this нет setState, следовательно должна была произойти ошибка
    this.setState is not a function
    Ответ написан
    3 комментария