JSX 在 Vue 项目上的应用

起因是使用 iView2.x Table 组件时，需要用到 render 函数显示自定义的内容。

从渲染简单的文字，到自定义组件，甚至捕获组件事件。

简单的用法

render: (h, params)=>{
    const title = params.row.title

    if(!params.row.title) return "—"
    return <span>{ title }</span>;
}

复杂的用法

大部分的模板指令都不适用于这种 JSX ，除了 v-show ，相关功能需要 自己实现 。

render(h, params){
    const item = params.row;
    
    const enabledHtml  = <a href="javascript:;" onClick={ ()=>vm.publish(item) }>发布</a>;
    const disabledHtml = <a href="javascript:;" onClick={ ()=>vm.recall(item) }>撤回</a>;
    return (
        <adm-link-group>
            { [enabledHtml, disabledHtml][item.status] }
            <router-link to={ {name: `${ROUTER}`, params:{ id }, query: { }} }>
                <a href="javascript:;">修改</a>
            </router-link>
            <a href="javascript:;" class="" onClick={ ()=>vm.destroy(item) }>删除</a>
        </adm-link-group>
    );
},

• 动态绑定 v-bind 指令，去掉了 : 写法，用一对花括号 { } 取代
• 在花括号内 { } 使用表达式，判断需要渲染的内容
• 返回的模板中可以使用 自义定组件如 <adm-link-group></adm-link-group> （小写字符开头）

组件捕获事件

render(h, params){
    const item = params.row
    return (
    <iv-select
        style={{ width: '120px' }}
        v-model={item.comment_status} vOn:on-change={ (val)=> { vm.saveCommentRule({val, item}) } } >
        <iv-option key={1} value={1}> 先审核后显示 </iv-option>
        <iv-option key={2} value={2}> 先显示后审核 </iv-option>
    </iv-select>)
},

根据 Babel Preset JSX - Directives 说明，元素和组件的事件监听器 v-on 缩写 @ 写法有差别，原先在模板中是这样使用的：

<iv-select @on-change="selectChanged" ></iv-select>

在 JSX 中：

<iv-select vOn:on-change={ vm.selectChanged } ></iv-select>

模板渲染 & JSX

多数情况下都在使用 template 方式创建视图，因为有 v-if v-for 等指令减少了工作量。

渲染函数可以让我们使用 JavaScript 编程的方式创建视图层的东西。

createElement

createElement 可以创建虚拟节点 VNode，把这个 VNode 返回给 render 函数即可：

render: (h, params) => {
  return h('div', [
    h('Icon', {
      props: {
        type: 'person'
      }
    }),
    h('strong', params.row.name)
  ]);
}

将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的，如果在作用域中 h 失去作用，在应用中会触发报错。

但使用 render 函数创建的可读性就很差了，因此一般使用 JSX 语法进行编程。

而且通过 Vue-cli3 创建的项目就已经支持若干 JSX 语法啦！

参考文档

Table 表格 - iView

渲染函数 & JSX

Babel Preset JSX

babel-plugin-transform-vue-jsx