vue render 函数 div 动态class怎么写呢？

Question

render(h, row) {
  return (
    <div
    class="titlewrap"
    :class="{
      childrequirement: row.parentCode
    }"
  >
    <icon>
    <pre class="title">{ row.title }</pre>
  </div>
  )
}

这里 div怎么写动态class呢 ？ 这么写会报错

Answer 1

就是按照 jsx 的写法来写就可以了啊：

render(h, row) {
  const classList = [
    'titlewrap',
    row.parentCode ? 'childrequirement' : '' 
  ].join(' ')
  return (
    <div class={ classList }>
      <icon>
      <pre class="title">{ row.title }</pre>
    </div>
  )
}

Answer 2

你这是用了jsx吧，那里面就不能用vue的语法糖了，用最原始的方式来写吧

render(h, row) {
  return (
    <div
    class="titlewrap {row.parentCode?'childrequirement':''  }"
  >
    <icon>
    <pre class="title">{ row.title }</pre>
  </div>
  )
}

https://cn.vuejs.org/guide/extras/render-function.html

Answer 3

: 只是 v-bind 的缩写，不用模板是不会生效的

可以改成以下形式：

render() {
  return (
    <div class={{ childrequirement: row.parentCode }}>
      Hello, World!
    </div>
  );
}

需要注意的点就是这里的 {{}} 不是 vue 的插值语法，JSX 中 {} 接收一个表达式，只不过刚好收到一个对象{ childrequirement: row.parentCode }，才有了 class={{ childrequirement: row.parentCode }}