Javascript 呈现React组件时出现意外标记

这是我的组件代码片段：

renderEditor() {
    return (
      <FroalaEditor 
       base='https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.4'
       value={this.state.value} 
      />
    );    
}

render() {
    return (
      {this.renderEditor()}
    );
}

renderditor（）{
返回(
);    
}
render（）{
返回(
{this.renderditor（）}
);
}

---

但是当我运行这段代码时，我在

{this.renderditor（）}

处得到了一个意外的令牌错误。为什么会发生这种情况？我如何修复它？

您必须将方法调用封装在JSX元素中，否则Babel将无法将返回语句识别为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>
);

这将首先防止代码被解释为对象文本，并将返回方法的返回值，即组件

---

这也适用于其他情况，例如：

return (
  {foo}
);

它被解释为对象，因为

（）

是分组运算符，并且只能包含表达式。对象文字是一个表达式，因此返回具有速记属性的对象文字。它将脱胶并传输至：

return {
  foo: foo
};

---

它不是有效的React元素或null，因此会发生错误。但是在这种情况下，如果

foo

不是有效的React元素，则必须将其包装在有效的React元素中——不能只执行

返回foo

。如果

foo

是一个数组，则必须将其包装为

之类的内容，因为

render

必须返回React元素或null，而数组两者都不是。

必须将方法调用包装为JSX元素，否则Babel将无法识别返回语句为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>
);

这将首先防止代码被解释为对象文本，并将返回方法的返回值，即组件

---

这也适用于其他情况，例如：

return (
  {foo}
);

它被解释为对象，因为

（）

是分组运算符，并且只能包含表达式。对象文字是一个表达式，因此返回具有速记属性的对象文字。它将脱胶并传输至：

return {
  foo: foo
};

---

它不是有效的React元素或null，因此会发生错误。但是在这种情况下，如果

foo

不是有效的React元素，则必须将其包装在有效的React元素中——不能只执行

返回foo

。如果

foo

是一个数组，那么您必须将它包装成

这样的东西，因为

render

必须返回React元素或null，而数组则不是。

可以尝试

返回此.renderditor（）

。我想知道React是否出于某种原因不喜欢这种语法。在JavaScript和JSX之间，大括号（

{…}

）有3种含义，其中哪一种适用取决于它们的使用（或在代码中的位置）。作为独立语句使用时，它们定义了。在语句的中间（非JSX）表达式中，它们定义了一个（这是它们在您的代码段中如何解释）。而且，它们只在JSX元素内部定义内联表达式。可以尝试

返回这个。renderditor（）

。我想知道React是否出于某种原因不喜欢这种语法。在JavaScript和JSX之间，大括号（

{…}

）有3种含义，其中哪一种适用取决于它们的使用（或在代码中的位置）。作为独立语句使用时，它们定义了。在语句的中间（非JSX）表达式中，它们定义了一个（这是它们在您的代码段中如何解释）。而且，它们只在JSX元素内部定义内联表达式。