Javascript 如果使用Jsx，如何在VueJS2.x中使用片段？

有鉴于此，React有一些片段，官方的github也没有提供任何这样的解决方案

---

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

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

下一步，Vue CLI将为函数h抛出一个错误。因此，从主

render

函数，只需将

h

作为参数传递给其他较小的渲染函数即可

在此之后，代码应该运行

注意-如果您有

eslint

，您可能只想添加这一行

//eslint禁用下一行

在每个渲染函数的顶部，以避免编译错误

此外，如果您是第一次来到Vuejs中的JSX，我使用了官方的巴贝尔插件

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

例如，如果我们这样做了

render(h) {

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

渲染（h）{
返回[
{this.isConfirm？this.renderF1（h）：this.renderF2（h）}
];
},

Vue犯了这个错误

---

从呈现函数返回多个根节点。渲染函数应该返回一个根节点。

您可以将方法编写为

renderF1（h）{

，而不是

renderF1:function（h）{

，因为它们的意思相同（这也修复了eslint警告）Omg。我不敢相信您指出了这一点。我希望问题是清楚的！

render(h) {

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