Подставка перевода строки ломает JSX. Почему?

Question

const addForm = <Formik> 
  {(props) => (
    <Form>
        (ommited...)
    </Form>
  )}
  </Formik>;

Это работает, как ожидалось. К моему удивлению, это (первая новая строка исключена) не

const addForm = <Formik> {(props) => (
    <Form>
        (ommited...)
    </Form>
  )}
  </Formik>;

Я получаю Error: React.Children.only expected to receive a single React element child.

Это ожидаемое поведение? Как я могу это понять?

Answer 1

Вы можете увидеть проблему немного яснее, если посмотрите на переданный код. Первый код производит это

"use strict";

var addForm = React.createElement(Formik, null, function (props) {
  return React.createElement(Form, null, "(ommited...)");
});

И второй код производит это

"use strict";

var addForm = React.createElement(Formik, null, " ", function (props) {
  return React.createElement(Form, null, "(ommited...)");
});

Разница в том, что во втором случае есть дополнительный " " как ребенок. Это означает, что компонент Formik имеет двух дочерних элементов, что недопустимо.

Так где же это дополнительное пространство в исходном коде? Это пространство между <Formik> и {(props) => (. Если вы удалите это, вы получите одинаковое поведение между обеими версиями. Первый пример кода имеет только пробел в начале строки, , который игнорируется при переносе, но пробел в середине строки имеет значение.