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，而数组都不是。< / p>

渲染React组件

1 个答案: