最近选用的框架iview表单组件的render写法让人有点不习惯，尤其是在写比较复杂的逻辑的时候，还是感觉模板式的写法比较方便且可读性较强。而render函数除了支持配置写法外，还支持jsx的写法。由于之前有用过react，因此对jsx并不陌生，可以直接上手。
1、安装插件
安装插件：transform-vue-jsx
如果需要使用v-model还需要安装jsx-v-model
在babelrc中配置
"plugins": [["import", { ???"libraryName": "iview", ???"libraryDirectory": "src/components"}], ???"transform-vue-jsx", "transform-runtime"], ?"env": { ???"test": { ?????"presets": ["env", "stage-2"], ?????"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"] ???} ?}2、使用及注意事项
下面粘贴的代码是Table组件的columns的配置项，这里需要注意的有2点：
1、需要全局注册组件，如输入框组件不可以写成Input必须写成i-input；
2、事件绑定：如点击事件需要携程onOn-click
{ ???????????title: "关系名", ???????????key: "name", ???????????width: 180, ???????????render: (h, params) => { ?????????????let { index, row } = params; ?????????????return ( ???????????????<div> ?????????????????{this.editShow && this.editIndex === index ? ( ???????????????????<span> ?????????????????????<i-input ???????????????????????placeholder="中文" ???????????????????????class="visual-name-input" ???????????????????????value={this.editRow.cnName} ???????????????????????onOn-blur={this.activeCellChange("cnName")} ?????????????????????/> ?????????????????????<i-input ???????????????????????placeholder="英文" ???????????????????????class="visual-name-input" ???????????????????????value={this.editRow.name} ???????????????????????onOn-blur={this.activeCellChange("name")} ?????????????????????/> ???????????????????</span> ?????????????????) : ( ???????????????????<span ?????????????????????class="overflow" ?????????????????????title={`${row.cnName}(${row.name})`} ???????????????????>{`${row.cnName}(${row.name})`}</span> ?????????????????)} ???????????????</div> ?????????????); ???????????} ?????????}如何在iview组件中使用jsx
原文地址：https://www.cnblogs.com/webhmy/p/10500013.html