一.JSX簡介
const element =
Hello, world!h1>;
JSX 可以很好地描述 UI 應該呈現出它應有互動的本質形式。JSX 可能會使人聯想到模版語言，但它具有 JavaScript 的全部功能。
Babel 會把 JSX 轉譯成一個名為 React.createElement() 函數調用。以下兩種示例代碼完全等效：
const element = (
<h1 className="greeting">
Hello, world!
h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement() 會預先執行一些檢查，以幫助你編寫無錯代碼，但實際上它建立了一個這樣的對象:
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
二.模闆缺陷
模闆的最大特點是擴充難度大，不易擴充。可能會造成邏輯備援：
:type="1">哈哈
:type="2">哈哈
:type="3">哈哈
Level元件需要對不同的type産生不同的标簽
v-if="type==1">
v-if="type==1">
v-else-if="type==2">
v-else-if="type==2">
v-else-if="type==3">
v-else-if="type==3">
export default {
props: {
type: {
type: Number
}
}
};
三.函數式元件
函數式元件沒有模闆，隻允許提供render函數
export default {
render(h) {
return h("h" + this.type, {}, this.$slots.default);
},
props: {
type: {
type: Number
}
}
};
複雜的邏輯變得非常簡單
四.JSX應用
使用jsx會讓代碼看起來更加簡潔、易于讀取
export default {
render(h) {
const tag = "h" + this.type;
return <tag>{this.$slots.default}tag>;
},
props: {
type: {
type: Number
}
}
};
五.render方法定制元件
編寫List元件，可以根據使用者傳入的資料自動循環清單
:data="data">
import List from "./components/List";
export default {
data() {
return {
data: ["蘋果", "香蕉", "橘子"]
};
},
components: {
List
}
};
class="list">
v-for="(item,index) in data" :key="index">
{{item}}
export default {
props: {
data: Array,
default: () => []
}
};
通過render方法來定制元件，在父元件中傳入render方法
:data="data" :render="render">
render(h, name) {
return {name};
}
我們需要createElement方法，就會想到可以編寫個函數元件，将createElement方法傳遞出來
class="list">
v-for="(item,index) in data" :key="index">
v-if="!render">{{item}}
v-else :item="item" :render="render">
import ListItem from "./ListItem";
export default {
components: {
ListItem
},
props: {
render: {
type: Function
},
data: Array,
default: () => []
}
};
ListItem.vue調用最外層的render方法，将createElement和目前項傳遞出來
export default {
props: {
render: {
type: Function
},
item: {}
},
render(h) {
return this.render(h, this.item);
}
};
六.scope-slot
使用v-slot 将内部值傳入即可
:arr="arr">
v-slot="{item}">
{{item}}
v-for="(item,key) in arr" :key="key">
:item="item">
七.編寫可編輯表格
基于iview使用jsx擴充成可編輯的表格
:columns="columns" :data="data">
import Vue from 'vue';
export default {
methods:{
render(h,{column,index,row}){
let value = row[column.key];
return <div on-click={(e)=>this.changeIndex(e,index)} >
{this.index === index ?
<i-input type="text" value={value} on-input={(value)=>{
this.handleChange(value,column,row)
}} onOn-enter={()=>this.enter(row,index)}/>:
<span>{value}span>
}
div>
},
enter(row,index){
this.data.splice(index,1,row);
this.index = -1;
},
handleChange(value,column,row){
row[column['key']]= value;
},
changeIndex(e,index){
this.index = index;
this.$nextTick(()=>{
e.currentTarget.getElementsByTagName("input")[0].focus();
})
}
},
data() {
return {
index:-1,
columns: [
{
title: 'Name',
key: 'name',
render:this.render
},
{
title: 'Age',
key: 'age',
},
{
title: 'Address',
key: 'address',
},
],
data: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03',
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01',
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02',
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04',
},
],
};
},
};
最後
如果你覺得這篇内容對你挺有啟發，我想邀請你幫我三個小忙：
- 點個「在看」，讓更多的人也能看到這篇内容(喜歡不點在看，都是耍流氓 -_-)
- 歡迎加我微信「qianyu443033099」拉你進技術群，長期交流學習...
- 關注公衆号「前端下午茶」，持續為你推送精選好文，也可以加我為好友，随時聊騷。
點個在看支援我吧，轉發就更好了