这是我的组件代码片段：
renderEditor() {
return (
<FroalaEditor
base='https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.4'
value={this.state.value}
/>
);
}
render() {
return (
{this.renderEditor()}
);
}
但是当我运行这段代码时，我在{this.renderEditor()}. 为什么会发生这种情况，我该如何解决？
您必须将方法调用包装在 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>s：
return this.renderEditor();
这将首先防止代码被解释为对象字面量，并将返回方法的返回值，即组件。
这也适用于其他情况，例如：
return (
{foo}
);
它被解释为一个对象，因为()是分组运算符，并且只能包含表达式。对象字面量是一个表达式，因此返回具有速记属性的对象字面量。它脱糖并转译为：
return {
foo: foo
};
这不是有效的 React 元素或 null，因此发生错误。但是，在这种情况下，如果foo不是有效的 React 元素，则必须将其包装在有效的 React 元素中——你不能只做return foo. 如果foo是数组，则必须将其包装在诸如 a 之类的东西中，<div>因为render必须返回 React 元素或 null，而数组两者都不是。