您必须将方法调用包装在JSX元素中，否则Babel不会将return语句识别为JSX或在这种情况下为内联JSX表达式。它不会将您的代码从JSX转换为纯Javascript，因此会出现错误。实际上，它被解释为
对象文字 ，而不是您期望的内联JSX表达式：
return ( {this.renderEditor()} //interpreted as an object literal, `return ({ ... })` // ^ The . here is an unexpected token in an object literal hence the error);解决方案是将其包装到一个元素中以告知Babel JSX，因此可以对其进行编译并
{}正确解释。return ( <div> {this.renderEditor()} </div>);这将使方法的返回值成为的子级，
<div>并且不会被解释为对象文字。而且，如果仅返回方法调用而没有其他任何同级，则可以完全删除
()分组和
<div>：
return this.renderEditor();
这将防止代码首先被解释为对象文字，并且将返回作为组件的方法的返回值。
这也适用于其他情况，例如：
return ( {foo});由于
()它是分组运算符，因此被解释为对象，并且只能包含表达式。对象文字是一个表达式，因此返回具有速记属性的对象文字。它可以减少和转换为：
return { foo: foo};这不是有效的React元素或为null，因此会发生错误。但是在这种情况下，如果
foo不是有效的React元素， 则必须
将其包装在有效的React元素中-您不能只是这样做
returnfoo。如果
foo是数组，则必须将其包装在诸如之类的内容中，
<div>因为
render必须返回一个React元素或null，而数组都不是。
