render()函数 php,JSX在render函数中的应用

一.JSX简介

const element =

Hello, world!

;

JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

以下两种示例代码完全等效：

const element = (

Hello, world!

);

const element = React.createElement(

'h1',

{className: 'greeting'},

'Hello, world!'

);

React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象:

const element = {

type: 'h1',

props: {

className: 'greeting',

children: 'Hello, world!'

}

};

二.模板缺陷

模板的最大特点是扩展难度大，不易扩展。可能会造成逻辑冗余：

哈哈

哈哈

哈哈

Level组件需要对不同的type产生不同的标签

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 {this.$slots.default};

},

props: {

type: {

type: Number

}

}

};

五.render方法定制组件

编写List组件，可以根据用户传入的数据自动循环列表

import List from "./components/List";

export default {

data() {

return {

data: ["苹果", "香蕉", "橘子"]

};

},

components: {

List

}

};

• {{item}}

export default {

props: {

data: Array,

default: () => []

}

};

通过render方法来定制组件，在父组件中传入render方法

render(h, name) {

return {name};

}

我们需要createElement方法，就会想到可以编写个函数组件，将createElement方法传递出来

{{item}}

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 将内部值传入即可

{{item}}

七.编写可编辑表格

基于iview使用jsx扩展成可编辑的表格

import Vue from 'vue';

export default {

methods:{

render(h,{column,index,row}){

let value = row[column.key];

return

this.changeIndex(e,index)} >

{this.index === index ?

{

this.handleChange(value,column,row)

}} onOn-enter={()=>this.enter(row,index)}/>:

{value}

}

},

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',

},

],

};

},

};

想要了解更多关于JSX的内容，欢迎关注【前端优选】