禁止换行符破坏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.

这是预期行为吗？我该如何理解它？

- leonbloy

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) => (之间的空格。如果删除它，你将得到两个版本之间相同的行为。代码的第一个示例只在行首有空格，在转换时被忽略，但是在一行中间的空格是有意义的。

- Nicholas Tower

---

啊，非常感谢！这个问题让我疯狂了。令人惊讶的是，Typescript对此没有抛出任何错误，导致了运行时问题。 - Nathan