如果使用Jsx，如何在Vuejs 2.x中使用片段？

Question

鉴于此，React有Fragments，而官方的github 线程也没有提供任何解决方案。

Vuejs中的解决方法是什么。这可能有助于开发人员从React后台迁移到Vuejs，即谁更喜欢渲染函数样式和JSX？

Answer 1

如果您不是针对组件的根元素执行此操作，那么这很简单。例如，您已经有一个根 div，其中包含从子渲染函数返回的多个节点。

正如我们以前在React中划分渲染函数一样，我们在这里也可以这样做。

解决方案：

这是代码

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 插件包

因此，如果您可以尝试以某种方式解决组件层次结构，那么您至少有一些工作要做。使用数组作为根元素返回会导致错误

例如，如果我们这样做

render(h) {

 return [
      <div>
        {this.isConfirm ? this.renderF1(h) : this.renderF2(h)}
      </div>
    ];
},

Vue 出错了

Multiple root nodes returned from render function. Render function should return a single root node.