前端 - 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

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

可以改成以下形式：

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

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

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

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

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