Gurenberg Block:如何从el-Function迁移到JSX元素?

时间:2021-01-06 作者:Marc

我读了很多教程,没有人使用el()语法,但是;标记语法;(JSX?)。以下是我的示例:

这很好,但我认为我必须迁移以使其更易于阅读:

  edit: function(props) {
    return [
      el(
        BlockControls, { key: \'controls\' },
        el( Toolbar, null,
          el(
            IconButton, {
              className: \'components-icon-button components-toolbar__control\',
              label: __(\'Update table of contents\', \'simpletoc\'),
              onClick: function() {
                sendfakeAttribute(props)
              },
              icon: \'update\'
            }
          )
        )
      ),
      el(
        \'p\', { className: props.className },
        el(
          ServerSideRender, {
            block: props.name,
            attributes: props.attributes
          }
        )
      )
    ];
我试过这个,效果很好!

  edit: function(props) {
    return (
      <p className={props.className}>
        <ServerSideRender block={props.name} attributes={props.attributes} />
      </p>
    )
  },
但后来我尝试添加工具栏组件,我的方括号出现语法错误:

<BlockControls>
    <Toolbar>
    <IconButton 
      className={components-icon-button components-toolbar__control} 
      label={__(\'Update table of contents\', \'simpletoc\')}
      onClick={function() {
        sendfakeAttribute(props)
      }}
      icon={update} 
    />
    </Toolbar>
  </BlockControls>
  <p className={props.className}>
    <ServerSideRender block={props.name} attributes={props.attributes} />
  </p>
我想我不明白如何正确地转义代码。即使我省略了图标按钮的所有属性,也会出现以下错误:

相邻的JSX元素必须包装在一个封闭标记中

有什么指导吗?文档中有更多的示例将非常有用。

1 个回复
SO网友:Sally CJ

我试图添加工具栏组件,但我得到了一个关于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>
);
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块编辑器中。