Question

我是React的新手，正在尝试对Wordpress块进行一些修改。

如果我这样做：

const addContentTypeMarkup = ( element, blockType, attributes ) => {
    // Do nothing if it's another block than our defined ones.
    if ( ! enableBlockContentTypeAttribute.includes( blockType.name ) ) {
        return element;
    }
    if ( attributes.contenttitle) {
        return (
            <div className="test">
            {element}
            </div>
    )
    } else {
        return element;
    }
};
addFilter( 'blocks.getSaveElement', 'my-mods/add-content-type-markup', addContentTypeMarkup);

那一切都很好。但是我不想只返回包装在div中的元素。我只想在元素之前添加内容。如果我尝试

return (
            <h3>test</h3>
            {element}
    )

然后我得到编译错误

ERROR in ./js/block.js
Module build failed: SyntaxError: Unexpected token, expected , (149:12)

  147 |         return (
  148 |             <h3>test</h3>
> 149 |             {element}
      |             ^
  150 |     )
  151 |     } else {
  152 |         return element;

Being new to React I am sure I am overlooking some simple concept...

thanks,
Brian

Answer 1

改为使用Fragment，它不会呈现，并且不会添加到DOM树中。

return (
   <>
     <h3>test</h3>
     {element}
   </>
);

您还可以使用React.Fragment语法：

return (
   <React.Fragment>
     <h3>test</h3>
     {element}
   </React.Fragment>
);

Answer 2

这些元素需要包装器，可以使用div或react Fragment组件。

<div>
  <h3>test</h3>
  {element}
</div>

或

<React.Fragment>
  <h3>test</h3>
  {element}
</React.Fragment>

Answer 3

当您返回JSX时，它需要包装在一个元素中。通常我们使用div或spans，但是如果您不想要实际的元素，则可以使用片段。片段是一种“伪元素”：它实际上并不向DOM呈现元素，而是充当返回的JSX的包装。

要做的很长的路要走

return (
    <React.Fragment>
        <h3>Test</h3>
        {element}
    </React.Fragment>
);

较新的简短语法：

return (
    <>
        <h3>Test</h3>
        {element}
    </>
);

如何在React元素之前添加元素？

3 个答案: