如何在iview组件中使用jsx

Posted 2021-02-12 webhmy

最近选用的框架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>
              );
            }
          }