Блог

Я впервые создаю свой собственный блок Гутенберга в WordPress. Я получаю сообщение об ошибке:

Ошибка синтаксиса: неожиданный токен ‘<‘

Рассматриваемый токен появляется после моего возврата массива

index.js

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

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

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

},

/** Rest of Code **/
 

‘<‘ тега — это то, что помечается, и я не уверен, почему, поскольку я следовал инструкциям, которые показывают, что это должен быть тот же настроенный код.

Эта ошибка вызвана возвратом нескольких элементов в вашем операторе return без корневого / родительского элемента. Это неприятная ошибка, с которой можно столкнуться с точки зрения синтаксиса, все кажется прекрасным, это скорее концепция, которая не сразу понятна из документов / руководств, когда вы начинаете создавать первый блок WordPress gutenberg с помощью React.

Чтобы решить эту проблему, все дочерние элементы должны принадлежать родительскому / корневому элементу, обычно рассматриваемому как <div className={className}> .. </div> в примерах WordPress Gutenberg, где возвращаются все элементы, включая InspectorControls, например:

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

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

В качестве альтернативы, это можно решить, обернув дочерние элементы в <> ... </> (сокращение для фрагмента ReactJS):

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

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

Я обнаружил, что элементы рендеринга документов ReactJS полезны для лучшего понимания того, как писать для WordPress Gutenberg.