如何在iview組件中使用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="中文"
                        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>
              );
            }
          }