抑制换行符会破坏 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) => (。如果删除它，两个版本之间的行为将相同。第一个代码示例仅在行开头有空格，在转译时会被忽略，但行中间的空格很重要。