Почему размещение тега div позволяет скомпилировать этот код React?

Question

Я нашел решение проблемы самостоятельно, но меня смущает, почему она работает, и хотел бы узнать больше.

У меня есть следующий код с ошибкой во время выполнения:

class ExampleClass extends React.Component {
  render() {
    const foo = [1, 2, 3]
    const jsx = foo.map((num) =>
      <span key={num}>
        {num}
      </span>
    );

    return(
      {jsx}
    )
  }
}

Для этого я получаю «Ошибка: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {jsx}). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив."

Однако, если я вместо этого сделаю это:

class ExampleClass extends React.Component {
  render() {
    const foo = [1, 2, 3]
    const jsx = foo.map((num) =>
      <span key={num}>
        {num}
      </span>
    );

    return(
      <div>
        {jsx}
      </div>
    )
  }
}

Это работает, выводя 123 на странице. Зачем мне нужен тег <div>? Разве в переменной jsx нет тегов, необходимых для ее вставки в html?

Answer 1

Это потому, что вы буквально возвращаете объект

Учитывайте это:

class ExampleClass extends React.Component {
  render() {
    const foo = [1, 2, 3]

    const jsx = foo.map((num) =>
      <span key={num}>
        {num}
      </span>
    );

    return ({jsx})
  }
}

Вы возвращаете объект только с одним ключом с именем jsx, со значением переменной jsx объявлено незадолго до этого.

Каждый JSX должен возвращаться в самой внешней оболочке:

1. Пара тегов:

const Component = () => { return ( <div> ...JSX </div> ) }

A React.Fragment:

const Component = () => { return ( <> ...JSX </> ) }

Компонент:

const Component = () => { return ( <ReturnedComponent /> ) }

Answer 2

Возвращая что-либо в jsx, он может вернуть только один элемент. Возвращая только {jsx}, вы возвращаете несколько элементов span, что недопустимо.