Как использовать фрагменты в Vuejs 2.x при использовании Jsx?

Question

Учитывая, что в React есть Фрагменты, а официальный github thread тоже не предлагает никакого решения как такового.

Каков обходной путь для этого в Vuejs.Это может помочь разработчикам, переходящим на Vuejs из фона React, т.е. кто предпочитает стили функций рендеринга и 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

поверх каждой функции рендеринга, чтобы избежать ошибки компиляции.

Далее - Если вы впервые приезжаете на землю JSX в Вуэйсе, я использовал официальный плагин Babel package

Так что если вы можете попытаться обойти ваши иерархии компонентов таким образом,По крайней мере, вам есть над чем работать.Использование массива в качестве возврата в качестве корневого элемента приводит к ошибке, хотя

Например, если мы выполнили

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.