好资源导航 » 文章资讯 » JSX在render函数中的应用详解

JSX在render函数中的应用详解

2023-08-15 07:25:04 56

一.JSX简介

constelement=Hello,world!
;

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

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

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

constelement=(

Hello,world!

);

constelement=React.createElement(
'h1',
{className:'greeting'},
'Hello,world!'
);

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

constelement={
type:'h1',
props:{
className:'greeting',
children:'Hello,world!'
}
};

二.模板缺陷

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

哈哈
哈哈
哈哈

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

三.函数式组件

函数式组件没有模板，只允许提供render函数

exportdefault{
render(h){
returnh("h"+this.type,{},this.$slots.default);
},
props:{
type:{
type:Number
}
}
};

复杂的逻辑变得非常简单

四.JSX应用

使用jsx会让代码看起来更加简洁、易于读取

exportdefault{
render(h){
consttag="h"+this.type;
return{this.$slots.default};
},
props:{
type:{
type:Number
}
}
};

五.render方法定制组件

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

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


render(h,name){
return{name};
}

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

ListItem.vue调用最外层的render方法，将createElement和当前项传递出来

六.scope-slot

使用v-slot将内部值传入即可



{{item}}

七.编写可编辑表格

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Hello,world!