渲染 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>
);

这将使方法的 return 值成为 <div> 的子值，并且不会被解释为对象文字。如果你只是 return 没有任何其他兄弟姐妹的方法调用，你可以只删除 () 分组和 <div>s 一起：

return this.renderEditor();

这将防止代码首先被解释为对象文字，并且将 return 方法的 return 值，即组件。

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

return (
  {foo}
);

它被解释为一个对象，因为 () 是分组运算符，并且只能包含表达式。对象字面量是一个表达式，因此具有 shorthand 属性的对象字面量是 returned。它脱糖并转译为：

return {
  foo: foo
};

这不是有效的 React 元素或 null，因此发生错误。但是在这种情况下，如果 foo 不是一个有效的 React 元素，你必须将它包装在一个有效的 React 元素中——你不能只做 return foo.如果 foo 是一个数组，你必须将它包装在诸如 <div> 之类的东西中，因为 render 必须 return 一个 React 元素或 null，而数组既不是.

渲染 React 组件时出现意外标记

Unexpected token when rendering React component

javascript

reactjs

react-jsx