我试图添加工具栏组件,但我得到了一个关于My括号的语法错误
首先,JSX 确实更简单,它的工作方式与常规HTML类似,但能够使用JavaScript表达式(字符串、变量、函数调用等),例如。<p>Hello, { name }</p>
或<p>{ Date.now() }</p>
.
导致语法错误的原因是这一部分:
className={components-icon-button components-toolbar__control}
因为括号内的任何东西(
{ this part }
) 是一个正则JavaScript表达式,因此如果要输出静态字符串,则必须将其括在单引号/双引号中:
// Bad
className={components-icon-button components-toolbar__control}
// Good
className={\'components-icon-button components-toolbar__control\'}
但实际上,对于静态属性值,您可以
<attribute>="<value>"
:
className="components-icon-button components-toolbar__control"
, i、 e.无需使用
{ expression }
格式:)
// Static attribute value.
const MyDiv = <div className="foo bar">baz</div>;
// Dynamic attribute value.
const someClass = someFunction() ? \'yes\' : \'no\';
const MyDiv2 = <div className={ \'foo bar \' + someClass }>baz</div>;
// Same as above, but without using the someClass variable.
const MyDiv3 = <div className={ \'foo bar \' + ( someFunction() ? \'yes\' : \'no\' ) }>baz</div>;
相邻的JSX元素必须包装在一个封闭标记中
这是一个通用的React错误,当(React)组件返回两个或多个相邻元素而不是一个元素时,会发生该错误:
这将导致上述错误,因为除非返回元素数组(请参见下面的项目符号3),否则React期望组件只返回单个元素:
// This is equivalent to "return 1 2", "const a = (1 2)" or "const a = 1 2" which
// results in a syntax error :(
const MyComponent = (
<div>foo bar</div>
<p>baz boo</p>
);
但是一个元素可以包含任意多个元素。如果是这种情况,请使用父元素(
div
,
p
, 自定义组件等)或(反应)
fragment — 导出为
wp.element.Fragment
在全球范围内
window
WordPress编辑器页面上的对象:
// Using Fragment (the short syntax, i.e. <> with </>).
const MyComponent = (
<>
<div>foo bar</div>
<p>baz boo</p>
</>
);
// Using div as the parent element.
const MyComponent = (
<div>
<div>foo bar</div>
<p>baz boo</p>
</div>
);
或如上所述(项目符号1),可以返回包含顶级相邻元素的数组,但
key 应在每个元素中设置:
// The output/HTML will be the same as the one that uses the Fragment (<> and </>).
const MyComponent = ([ // <- returns an array
<div key="one">foo bar</div>,
<p key="two">baz boo</p>
]);
因此,在您的情况下,您可能需要使用:
<>
<BlockControls>
... your code.
</BlockControls>
<p>
... your code.
</p>
</>
您可以找到更多关于;“必须包装”;错误
here, 但是使用的答案
React.xxx
应该是
wp.element.xxx
在古腾堡或WordPress块编辑器中。