如何在iview組件中使用jsx

最近選用的框架iview表單組件的render寫法讓人有點不習慣，尤爲是在寫比較複雜的邏輯的時候，仍是感受模板式的寫法比較方便且可讀性較強。而render函數除了支持配置寫法外，還支持jsx的寫法。因爲以前有用過react，所以對jsx並不陌生，能夠直接上手。

一、安裝插件

安裝插件：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"]
    }
  }

二、使用及注意事項

下面粘貼的代碼是Table組件的columns的配置項，這裏須要注意的有2點： 一、須要全局註冊組件，如輸入框組件不能夠寫成Input必須寫成i-input； 二、事件綁定：如點擊事件須要攜程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>
              );
            }
          }

原文出處：https://www.cnblogs.com/webhmy/p/10500013.html