有vue基础学react,vue-to-react
本文是用vue项目写的tsx介绍。其实用vue写jsx还是挺有意思的。接下来，让我们在《边肖九世》中详细介绍一下。感兴趣的朋友可以参考下面这篇文章。
我们可以直接创建jsx/tsx文件。
这次的项目结构是这样的：
在vue文件里这么使用
//index.vue
模板
div class=wrapper
Common :opt=list /
/div
/模板
脚本语言
从“vue-property-decorator”导入{ Component，Vue }；
从导入公用。/components/Common ；
@组件({
名称：“应用程序”，
组件：{
常见的，
},
})
导出默认类别应用程序扩展Vue {
私单=[我要去淘宝，我要去百度，我要去京东。COM ]；
}
/脚本
tsx这么写
从“vue”导入{ CreateElement }；
从“vue-property-decorator”导入{ Component，Vue，Prop }；
@组件({
名称：“常用”
})
导出默认类公共扩展Vue {
@Prop(Object) opt！任何[]
render(h: CreateElement) {
返回跨度
{
this.opt.map((it)={
return span style= margin right:10px“{ it }”/span
})
}
/span
}
}
让我们看一下页面。
您可能已经注意到，我还引用了一个CreateElement。这是干什么用的？这个东西叫渲染功能。不爱看vue一长串文档的兄弟们看这里。简单解释：这个东西可以渲染一个vnode节点。它比模板更接近编译器。你什么意思？这意味着模板语法也将被编译成一个呈现函数。所以直接使用渲染函数，相当于省去了从模板语法到渲染函数的过程。完成项目绩效是另一个大的改进！
简单介绍一下传参：
第一个参数：{ string object function } HTML标记名、组件选项对象或解决上述问题的异步函数。必需的。
第二个参数： Object对应于模板中属性的数据对象。
第三个参数： {String Array}}文本节点或子虚拟节点(VNodes)。
渲染功能给vue带来了很大的灵活性。以前想往子组件里插东西要写很多槽。有了渲染功能，我们就可以这样玩了。
//转换上面index.vue的数据
个人分发名单=[
{render: ()=[a ，{style: {color: red}}，我要去淘宝]}，
{render: ()=[a ，{style: {color: green}}，我要去JD。COM]}，
{render: ()=[a ，{style: {color: pink}}，我要百度]}，
];
tsx中这么写：
{
this.opt.map((it)={
返回h(.it.render())
})
}
你可以绘制一个精美的页面。
我们还可以这么玩：
//tsx转换
跨度
{
this.opt.map((it)={
返回它. render(h)
})
}
/span
在index.vue页面上，我们可以这样玩：
//index.vue
个人分发名单=[
{
render:(h:CreateElement)=1
H (a ，{style: {color: red ，MarginRight: 5px}}，我要去淘宝)，
},
{
render:(h:CreateElement)=1
H (a ，{style: {color: green ，MarginRight: 5px}}，我去JD。COM’)，
},
{
render:(h:CreateElement)=1
H (a ，{style: {color: pink ，MarginRight: 5px}}，我要百度)，
},
];
结果也是同样的花哨
我们还可以渲染乱七八糟的标签！
//index.vue转换
{
render:(h:CreateElement)=1
h(
h1 ，
{
样式：{ color: green ，marginRight: 5px }，
},
我要去JD。 COM
),
},
我们可以随心所欲的在渲染函数中定义事件：
//index.vue
个人分发名单=[
{
render:(h:CreateElement)=1
h(
一个，
{
样式：{ color: red ，marginRight: 5px }，
开：{
click: ()=this.iWillGoWhere(TB )，
},
},
我想去淘宝
),
}]
iWillGoWhere(类型：字符串){
const goWhere: any={
TB: ()={
alert(‘我要去淘宝了！’);
},
JD: ()={
alert(‘我要去JD。COM！”);
},
BD: ()={
alert(‘我要上百度！’);
},
};
go where[type]()；
}
就是这样！
关于如何在vue项目中编写react细节的这篇文章到此为止。有关在vue项目中编写react内容的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。