javascript - 如果使用 Jsx，如何在 Vuejs 2.x 中使用 Fragments？

Question

鉴于此，React 有 Fragments 和官方 github thread too 不提供任何解决方案。

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

Answer 1

如果您不为组件的根元素执行此操作，这很简单。例如，您已经有一个根 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 出错了

从渲染函数返回的多个根节点。渲染函数应返回单个根节点。