Стоит ли использовать React.createElement для возврата нескольких дочерних элементов из компонента?

const transform = (text, data) => {
  // выполнить преобразование
  // ... 

  // В конце у меня есть этот массив, состоящий из текстовых фрагментов и компонентов
  transformedElements = [
    'текст',
    <MyLink>Слово</MyLink>,
    'больше текста',
    <MyLink>ДругоеСлово</MyLink>,
  ];
  return React.createElement('div', null, transformedElements);
}

const Transformed = ({text, data}) => {
  // выполнить преобразование ...
  transformedElements = [
    'текст',
    <MyLink>Слово</MyLink>,
    'больше текста',
    <MyLink>ДругоеСлово</MyLink>,
  ];
  return transformedElements; 
  // также работает как:
  // return React.createElement('div', null, transformedElements);
}

Ответ

Вопрос, который вы подняли, касается выбора способа возврата нескольких дочерних элементов из компонента React. Давайте рассмотрим, стоит ли использовать React.createElement для возврата массива элементов или же вернуть массив непосредственно.

Рекомендации

1. Возврат массива элементов:
   Вы можете вернуть массив компонентов напрямую из вашего функционального компонента. Например:

   const Transformed = ({text, data}) => {
    // Выполняем преобразование ...
    const transformedElements = [
      'text',
      <MyLink>Word</MyLink>,
      'more text',
      <MyLink>AnotherWord</MyLink>,
    ];
    return transformedElements; 
   }

   Плюсы:

   • Более чистый и лаконичный код без лишнего вызова createElement.
   • Улучшенная читаемость, особенно для разработчиков, знакомых с синтаксисом JSX.

   • Позволяет использовать возможности React, такие какFragments. Вы можете обернуть массив в <> (шорт-синтаксис фрагментов), чтобы избежать создания лишнего элемента:

     return (
     <>
      {transformedElements}
     </>
     );

2. Использование React.createElement:
   Если вы решите использовать React.createElement, ваш компонент будет выглядеть следующим образом:

   const Transformed = ({text, data}) => {
    // Выполняем преобразование ...
    const transformedElements = [
      'text',
      <MyLink>Word</MyLink>,
      'more text',
      <MyLink>AnotherWord</MyLink>,
    ];
    return React.createElement('div', null, transformedElements);
   }

   Плюсы:

   • Позволяет явно указать, какой элемент будет корневым. Например, если вам необходимо, чтобы все элементы находились внутри div, это будет сделано.
   • Однако, это может быть избыточным в случаях, когда вам не нужно никакое обертывание.

Рекомендация

Если не требуется специальная обертка (например, для стилей или верстки), рекомендуется просто возвращать массив элементов напрямую. Это дает вам больше гибкости, позволяет использовать фрагменты React и делает ваш код более читаемым.

Однако, если потребности вашего приложения требуют наличие одного корневого элемента, то использование React.createElement с созданием контейнера (например, div) все еще уместно.

Вывод

Используйте возврат массива, если ваш компонент не требует явного корневого элемента. Если вам нужно обернуть элементы в контейнер, используйте React.createElement или оберните массив в фрагмент. Всегда выбирайте тот подход, который лучше соответствует контексту вашего компонента и улучшает читабельность и поддержку кода.