渲染React组件时出现意外令牌

Question

这是我的组件代码的片段：

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()}。为什么会发生这种情况，我该如何解决？

Answer 1

您必须将方法调用包装在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元素中-您不能只是这样做return foo。如果foo是数组，则必须将其包装在诸如之类的内容中，<div>因为render必须返回一个React元素或null，而数组都不是。