全局样式某些特定的情况下不起作用

[Mister-Duan]

问题描述
在自定义组件里引用全局样式，并通过static options = {addGlobalClass: true}，发现有的全局样式起作用，有的全局样式不起作用！不起作用的一般带有this.props.items.map

复现步骤
[复现问题的步骤]

1. 编写自定义组件
2. 组件带 static options = {addGlobalClass: true}
3. 编译
4. 运行，全局样式不起作用

下面是不起作用的自定义组件代码

export default class AppItem extends Component {
  constructor() {
    super(...arguments)
    this.state = {
    }
  }

  to(eid){
    Taro.navigateTo({
      url: `/pages/company/index/index?eid=${eid}`
    })
  }

  static options = {addGlobalClass: true}

  render() {
    return (
      <View>
        {
          this.props.items.map((item)=>{
            return(<View className='padding-h-0-6x one-company' key={item.eid}>
                <View className='bg-white padding-1x  d-flex flex-row justify-content-start' onClick={this.to.bind(this,item.eid)}>
                    <View class='flex-shrink-0'>
                      <Image className='img' src={item.logoUrl} mode='aspectFill' lazyLoad='true' />
                    </View>
                    <View className='d-flex flex-column padding-l-1x'>
                      <View className='font-gray-600 font-16'>{item.name}</View>
                      <View className='font-gray-500 margin-t-0-6x font-13 d-flex flex-nowrap msg'>
                          <Text className='padding-r-0-6x'>{item.operName}</Text>
                          <Text className='border-left padding-h-0-6x'>{item.regCapiDesc}</Text>
                          <Text className='border-left padding-h-0-6x'>{item.startDate}</Text>
                      </View>
                      <View>
                          <Text className='label margin-t-0-6x margin-r-0-6x'>{item.status}</Text>
                          {item.tags.map((tag,index)=><Text className='label margin-t-0-6x margin-r-0-6x' key={index} style={'color:'+tag.RGB || 'auto'}>{tag.tag}</Text>)}
                      </View>
                    </View>
                </View>
            </View>)
          })
        }
      </View>
    )
  }
}

期望行为
全局样式起作用，哈哈，

报错信息
没有报错信息，但是样式不起作用
组件内的样式是 className='bg-white padding-1x d-flex flex-row justify-content-start'
编译运行后的样式 class="app-company-item__b-white app-company-item__padding-1x app-company-item__d-flex app-company-item__flex-row app-company-item__justify-content-start"

[这里请贴上你的完整报错截图或文字]

系统信息

• 操作系统: Windows 10
• Taro 版本 1.2.0
• Node.js 版本 8.12.0
• 报错平台 swan

补充信息
可能由于props.map

[luckyadam]

能否贴一下编译后的代码

[Mister-Duan]

<block> <view class="bg-white"> <view class="padding-h-0-6x one-company" s-key="{{item.privateOriginal.eid}}" s-for="loopArray0" s-for-item="item"> <view class="bg-white padding-1x d-flex flex-row justify-content-start" bindtap="to" data-e-to-so="this" data-e-to-a-a="{{item.privateOriginal.eid}}"> <view class="flex-shrink-0"> <block> <block s-if="{{item.privateOriginal.logoUrl}}"> <image class="img" src="{{item.privateOriginal.logoUrl}}" mode="aspectFill" lazy-load="true" /> </block> <block s-else> <view class="img"></view> </block> </block> </view> <view class="d-flex flex-column padding-l-1x"> <view class="font-gray-600 font-16">{{item.privateOriginal.name}}</view> <view class="font-gray-500 margin-t-0-6x font-13 d-flex flex-nowrap msg"> <text class="padding-r-0-6x">{{item.privateOriginal.operName}}</text> <text class="border-left padding-h-0-6x">{{item.privateOriginal.regCapiDesc}}</text> <text class="border-left padding-h-0-6x">{{item.privateOriginal.startDate}}</text> </view> <view> <text class="label margin-t-0-6x margin-r-0-6x">{{item.privateOriginal.status}}</text> <text class="label margin-t-0-6x margin-r-0-6x" s-key="{{index}}" style="{{tag.$loopState__temp2}}" s-for="item.$anonymousCallee__1" s-for-item="tag" s-for-index="index">{{tag.privateOriginal.tag}}</text> </view> </view> </view> </view> </view> </block>

[Mister-Duan]

应该是百度平台的问题，微信下全局样式没问题

[Mister-Duan]

遍历这个组件，不在组件里遍历，避免了这个问题，全局样式起作用了

[Mister-Duan]

<View> <Text className='label margin-t-0-6x margin-r-0-6x'>{this.props.item.status}</Text> {this.props.item.tags.map((tags,index) => { return (<Text className='label margin-t-0-6x margin-r-0-6x' style={'color:' + tags.RGB || 'auto'} key={index} > {tags.tag}</Text> )}) } </View>

同样是一个组件内，可是第一行Text的className内的label margin-t-0-6x margin-r-0-6x 起作用 ，后面map遍历的Text的className内的label margin-t-0-6x margin-r-0-6x 不起作用 ，这个避免不了啊，也找了半天，找不出问题出在哪里

[Mister-Duan]

编译后的swan
<view> <text class="label margin-t-0-6x margin-r-0-6x">{{item.status}}</text> <text class="label margin-t-0-6x margin-r-0-6x" style="{{tags.$loopState__temp2}}" s-key="{{index}}" s-for="loopArray0" s-for-item="tags" s-for-index="index">{{tags.privateOriginal.tag}}</text> </view>

[Mister-Duan]

编译后的js
`"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

var _index = require("../../npm/@tarojs/taro-swan/index.js");

var _index2 = _interopRequireDefault(_index);

var _index3 = require("../../npm/prop-types/index.js");

var _index4 = _interopRequireDefault(_index3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.proto = superClass; }

var AppCompanyItem = function (_BaseComponent) {
_inherits(AppCompanyItem, _BaseComponent);

function AppCompanyItem() {
var _ref;

var _temp, _this, _ret;

_classCallCheck(this, AppCompanyItem);

for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  args[_key] = arguments[_key];
}

return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AppCompanyItem.__proto__ || Object.getPrototypeOf(AppCompanyItem)).call.apply(_ref, [this].concat(args))), _this), _this.$usedState = ["loopArray0", "item"], _this.$$refs = [], _temp), _possibleConstructorReturn(_this, _ret);

}

_createClass(AppCompanyItem, [{
key: "_constructor",
value: function _constructor(props) {
_get(AppCompanyItem.prototype.proto || Object.getPrototypeOf(AppCompanyItem.prototype), "_constructor", this).call(this, props);
// this.state={
// ...props
// }
}
}, {
key: "to",
value: function to(eid) {
_index2.default.navigateTo({
url: "/pages/company/index/index?eid=" + eid
});
}
}, {
key: "_createData",
value: function _createData() {
this.__state = arguments[0] || this.state || {};
this.__props = arguments[1] || this.props || {};
;

  var loopArray0 = this.__props.item.tags.map(function (tags, index) {
    tags = {
      privateOriginal: (0, _index.internal_get_original)(tags)
    };
    var $loopState__temp2 = (0, _index.internal_inline_style)('color:' + tags.privateOriginal.RGB || 'auto');
    return {
      $loopState__temp2: $loopState__temp2,
      privateOriginal: tags.privateOriginal
    };
  });

  Object.assign(this.__state, {
    loopArray0: loopArray0
  });
  return this.__state;
}

}]);

return AppCompanyItem;
}(_index.Component);

AppCompanyItem.properties = {
"item": {
"type": null,
"value": null
}
};
AppCompanyItem.$$events = ["to"];
AppCompanyItem.options = { addGlobalClass: true };

AppCompanyItem.propTypes = {
item: _index4.default.object.isRequired
};
AppCompanyItem.defaultProps = {
item: { tag: '', RGB: '' }
};

exports.default = AppCompanyItem;

Component(require('../../npm/@tarojs/taro-swan/index.js').default.createComponent(AppCompanyItem));
module.exports = exports.default;` @luckyadam @smoothdvd @guotie @aNd1coder

[luckyadam]

好的，这个问题我们再跟进下，看看能不能反馈给百度小程序的开发人员

[Mister-Duan]

嗯嗯 谢谢