返回数组后的 JSX 意外令牌答案

【问题标题】：JSX Unexpected Token after Return Array返回数组后的 JSX 意外令牌
【发布时间】：2021-03-16 01:18:03
【问题描述】：

我第一次在 WordPress 中创建自己的 Gutenberg 块。我收到一个错误：

SyntaxError: Unexpected token '

有问题的令牌出现在我的返回数组之后

index.js

edit({attributes, setAttributes}) {
  const{
    title,
    backgroundColor,
  } = attributes;

  return ([
    <InspectorControls>
      /** Code Block **/
    </InspectorControls>,

    <div>
      /** Code Block **/
    </div>
  ]);

},

/** Rest of Code **/

标记的“

【问题讨论】：

标签： javascript syntax-error jsx wordpress-gutenberg

【解决方案1】：

此错误是由于在您的 return 语句中返回多个元素而没有根/父元素。在语法方面遇到令人沮丧的错误，一切似乎都很好，当您开始使用 React 创建第一个 WordPress gutenberg 块时，它更像是一个从文档/教程中无法立即清楚的概念。

要解决这个问题，所有子元素都需要属于一个父/根元素，在WordPress Gutenberg 示例中通常称为<div className={className}> .. </div>，其中返回包括InspectorControls 在内的所有元素，例如：

return ([
<div className={className}> // Add this 
    <InspectorControls>
     /** Code Block **/
    </InspectorControls>

    <div>
    /** Code Block **/
    </div>
</div> // Add enclosing tag
  ]);

或者，这可以通过将子元素包装在 <> ... </> (shorthand for a ReactJS fragment) 中来解决：

return ([
<> // Add this (generic ReactJS fragment) 
    <InspectorControls>
     /** Code Block **/
    </InspectorControls>

    <div>
    /** Code Block **/
    </div>
</> // Add enclosing tag
  ]);

我发现Rendering Elements of the ReactJS docs 有助于更好地理解如何为 WordPress Gutenberg 编写代码。

【讨论】：