Webpack.className не назначает правильный класс CSS для компонента - PullRequest
0 голосов
/ 22 января 2019

Я недавно обновил приложение с реакции 15 до реакции 16, и сейчас я провожу некоторые тесты с новым и старым стеком, и по какой-то причине className перестало работать.

Компонент:

import React from 'react';
import { View } from 'react-native';
import pickBy from 'lodash/pickBy';

const propsToIgnore = ['keyboardShouldPersistTaps', 'setRef', 'enableAutoAutomaticScroll'];
const filterFunction = (value, key) => !propsToIgnore.includes(key);

export default props => <View className={props.hidden ? 'CrossPlatformScrollView-hidden' : 'CrossPlatformScrollView'}
                              {...pickBy(props, filterFunction)} />;

(очень простой) файл scss:

.CrossPlatformScrollView-hidden {
  display: none;
}

Результат:

<div class="r-ui-view-15pvbv0" style="flex: 1 1 0%; flex-direction: column; margin-bottom: 50px; -webkit-box-flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal;">

В то время как тот же код с выходом реагирует 15:

<div class="CrossPlatformScrollView rn-1oszu61 rn-1efd50x rn-14skgim rn-rull8r rn-mm0ijv rn-13yce4e rn-fnigne rn-ndvcnb rn-gxnn5r rn-deolkf rn-6koalj rn-16y2uox rn-1wbh5a2 rn-1mlwlqe rn-eqz5dr rn-1mnahxq rn-61z16t rn-11wrixw rn-ifefl9 rn-bcqeeo rn-wk8lta rn-9aemit rn-1mdbw0j rn-gy4na3 rn-bnwqim" style="margin-bottom: 50px;">

Если у компонента есть скрытая опора, он отображает правильный скрытый класс CrossPlatformScrollView.

Конфигурация веб-пакета:

{
    test: /\.scss$/,
    use: [
      {
        loader: 'style-loader',
        options: { sourceMap: DEBUG }
      },
      {
        loader: 'css-loader',
        options: {
          localIdentName: '[sha512:hash:base32]-[name]-[local]',
          sourceMap: DEBUG
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: DEBUG
        }
      },
      {
        loader: 'resolve-url-loader'
      },
      {
        loader: 'sass-loader',
        options: {
          includePaths: [path.resolve(__dirname, '../node_modules/foundation-sites/scss/')],
          sourceMap: DEBUG,
        }
      }
    ]
  }

Я проверил несколько связанных вопросов ( Имя класса Css не применяется для реагирующего компонента , Передача className для компонента React ), но я не нашел решения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...