如何在iview元件中使用jsx

摘要： 最近選用的框架iview表單元件的render寫法讓人有點不習慣，尤其是在寫比較複雜的邏輯的時候，還是感覺模板式的寫法比較方便且可讀性較強。而render函式除了支援配置寫法外，還支援jsx的寫法。由於之前有用過react，因此對jsx並不陌生，可以直接上手。 1、安裝外掛 安裝外掛...

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