请问为什么用render函数生成的元素类名没有生效

Question

题目描述

在模拟美团商家列表，子组件拿到父组件传来的商家星级的数据1-5星。然后我想根据星数来生成对应的星星。

题目来源及自己的思路

一开始用v-if可以实现，但是是写了十个标签把全部情况都判断了，所以想用render函数，但是render函数渲染出来的标签上类名相同，但对应类的属性没有生效。请问为什么？

相关代码

类名： 'info_star'星星共有的类；info_star--inactive灰色星星的类

子组件Star.vue

<script>
export default {
  name: 'Star',
  render: function (createElement) {
    let starArray = []
    let activeNumber = parseInt(this.starNumber)
    let inActivatedNumber = 5 - parseInt(this.starNumber)
    for (let i = 0; i < activeNumber; i++) {
      starArray.push(createElement('i', { class: 'info_star' }))
    }
    for (let j = 0; j < inActivatedNumber; j++) {
      starArray.push(createElement('i', { class: 'info_star--inactive' }))
    }
    return createElement(
      'div',
      {
        'class': 'info_starRate'
      }, starArray
    )
  },
  props: {
    starNumber: {
      type: Number,
      required: true
    }
  }
}
</script>

调用的部分

 <Star :starNumber="item.wm_poi_score"></Star>
            <i class="info_star"></i>

你期待的结果是什么？实际看到的错误信息又是什么？

最后在页面上的结果是

想请问一下怎么解决 谢谢

---

Answer 1

render里面传递通用的属性 可以可以使用staticClass 属性替代class

下面是我测试的代码

属性是有效的啊

我想你应该把重点 放到我在生成i元素时 使用的方法。
这才是你class属性不生效的原因。

至于为什么这样使用 可以查看vue官网

Answer 2

::v-deep .your-class{...}
这样就可以了。