鉴于此,React 有 Fragments 和官方 github thread too 不提供任何解决方案。
Vuejs 中的解决方法是什么。这可能有助于开发人员从 React 背景迁移到 Vuejs,即谁更喜欢渲染函数样式和 JSX?
最佳答案
如果您不为组件的根元素执行此操作,这很简单。例如,您已经有一个根 div,其中包含从子渲染函数返回的多个节点。
我们之前在React中划分render函数,这里也可以这样做。
解决方案:
这是代码
render(h) {
return (
<div>
{this.isConfirm ? this.renderF1(h) : this.renderF2(h)}
</div>
);
},
methods: {
//eslint-disable-next-line
renderF1: function(h){
return [
<div></div>,
<div class='anotherDiv'></div>
]
},
//eslint-disable-next-line
renderF2: function(h){
return [
<span></span>,
<div class='secondDiv'></div>
]
}
}
解释:
第一步是像这样从array
返回多个根节点元素
return [node, node];
接下来,Vue CLI 将为function h
抛出错误。因此,从您的主要 render
函数只需将 h
作为参数传递给其他较小的渲染函数。
此代码应运行后。
注意 - 如果您有eslint
,您可能只想添加这一行
//eslint-disable-next-line
在每个渲染函数之上以避免编译错误。
进一步 - 如果你是第一次来到 Vuejs 中的 JSX 土地,我使用官方 Babel 插件 package
因此,如果您可以尝试以某种方式解决您的组件层次结构,那么您至少有一些工作要做。尽管使用数组作为根元素返回会导致错误
例如,如果我们这样做了
render(h) {
return [
<div>
{this.isConfirm ? this.renderF1(h) : this.renderF2(h)}
</div>
];
},
Vue 出错了
从渲染函数返回的多个根节点。渲染函数应返回单个根节点。
关于javascript - 如果使用 Jsx,如何在 Vuejs 2.x 中使用 Fragments?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52758165/