如何在iview组件中使用jsx

摘要：最近选用的框架iview表单组件的render写法让人有点不习惯，尤其是在写比较复杂的逻辑的时候，还是感觉模板式的写法比较方便且可读性较强。而render函数除了支持配置写法外，还支持jsx的写法。由于之前有用过react，因此对jsx并不陌生，可以直接上手。

最近选用的框架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="中文"
               
                value={this.editRow.cnName}
                onOn-blur={this.activeCellChange("cnName")}
              />
              <i-input
                placeholder="英文"
               
                value={this.editRow.name}
                onOn-blur={this.activeCellChange("name")}
              />
            </span>
          ) : (
            <span
             
              title={`${row.cnName}(${row.name})`}
            >{`${row.cnName}(${row.name})`}</span>
          )}
        </div>
      );
    }
  }

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_2291