渲染React组件时出现意外的标记 [英] Unexpected token when rendering React component

问题描述

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

This is a snippet of my component code:

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

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

但是当我运行此代码时，我在<$ c时收到意外的令牌错误$ C> {this.renderEditor（）} 。为什么会发生这种情况以及如何解决？

But when I run this code I get an unexpected token error at {this.renderEditor()}. Why does this happen and how can I fix it?

推荐答案

您必须将方法调用包装在JSX元素中，否则Babel不会将return语句识别为JSX，或者在这种情况下是内联JSX表达式。它不会将您的代码从JSX转换为纯JavaScript，因此会出错。它实际上被解释为一个对象文字，而不是你期望的内联JSX表达式：

You have to wrap your method invocation in a JSX element or else Babel won't recognize the return statement as JSX, or an inline JSX expression in this case. It won't transpile your code from JSX to plain JavaScript, hence the error. It actually is interpreted as an object literal, not an inline JSX expression as you expect:

return (
    {this.renderEditor()} //interpreted as an object literal, `return ({ ... })`
    //   ^ The . here is an unexpected token in an object literal hence the error
);

解决方法是将它包装在一个元素中，告诉Babel它是JSX，所以它被转换成了 {} 被正确解释。

The solution is to wrap it in an element to tell Babel it's JSX, so it is transpiled and the {} are interpreted correctly.

return (
    <div>
        {this.renderEditor()}
    </div>
);

这将使方法的返回值成为<的子元素。 div> 并且不会被解释为对象文字。如果你只返回方法调用而没有任何其他兄弟姐妹，你可以删除（）分组和< div> s：

This will make the return value of the method a child of the <div> and won't be interpreted as an object literal. And if you're only returning just the method invocation without any other siblings, you can just remove the () grouping and <div>s altogether:

return this.renderEditor();

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

This will prevent the code from being interpreted as an object literal in the first place, and will return the return value of he method, which is the component.

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

This also applies to other situations such as:

return (
  {foo}
);

它被解释为对象，因为（）是分组运算符，只能包含表达式。对象文字是表达式，因此返回具有速记属性的对象文字。它消失并转化为：

It's interpreted as an object because () is the grouping operator, and can only contain expressions. An object literal is an expression, thus an object literal with shorthand properties is returned. It desugars and transpiles to:

return {
  foo: foo
};

哪个不是有效的React元素或null，因此会发生错误。但在这种情况下，如果 foo 不是一个有效的React元素，你必须将它包装在一个有效的React元素中 - 你不能只需返回foo 。如果 foo 是一个数组，你必须将它包装在诸如< div> 之类的内容中，因为 render 必须返回一个React元素或null，这个数组都不是。

Which is not a valid React element or null, thus the error occurs. In this case though, if foo is not a valid React element, you have to wrap it in a valid React element -- you can't just do return foo. If foo were an array, you'd have to wrap it in something such as a <div> because render must return a React element or null, which an array is neither.

这篇关于渲染React组件时出现意外的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！