javascript - 返回数组后的JSX意外 token

Question

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

SyntaxError: Unexpected token '<'

有问题的 token 出现在我的返回数组之后
index.js

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

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

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

},

/** Rest of Code **/

标签的“<”是被标记的内容，我不确定为什么要跟随教程来说明这应该是相同的代码设置。

Answer 1

此错误是由于在return语句中返回多个元素而没有根/父元素而引起的。从语法 Angular 来看，这是一个令人沮丧的错误，一切似乎都很好，它的概念在您开始使用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编写代码。