Wordpress GutenBerg Block - React.Children.only 预计会收到一个 React 元素子元素

Question

当我在创建 gutenburg blocks
时尝试在 WordPress 中添加 Tooltip 它显示错误。检查下面

Invariant Violation: Minified React error #143; visit https://reactjs.org/docs/error-decoder.html?invariant=143

React.Children.only expected to receive a single React element child

这是我正在尝试的代码。

<Fragment>
    <div className="my-block-class">
        <Tooltip text={ __( 'Select Grid' ) }>
            { getIcon( 'block-icon', true ) }
        </Tooltip>
    </div>
    <InnerBlocks
        template={ this.getBlockTemplate() }
        templateLock="all"
        allowedBlocks={ [ 'hwb/my-block' ] }
    />
</Fragment>

问题出在这段代码中。

<Tooltip text={ __( 'Select Grid' ) }>
    { getIcon( 'block-icon', true ) }
</Tooltip>

当我删除 Tooltip 代码时工作正常。

更新

getIcon() return svg 图标我也试过了 Dashicon 它不起作用，意思是问题不在 geticon() 函数中。

我也这样试过

<Tooltip text={ __( 'Select Grid' ) }>
    <Dashicon icon="edit" />
</Tooltip>

Answer 1

我试过的 getIcon 函数一定有问题 Dashicon 对我来说工作正常。您可能错过了从 wp-components

导入 Dashicon

试试这个。

const { Tooltip, Dashicon } = wp.components;

<Tooltip text={ __( 'Select Grid' ) }>
    <Dashicon icon="edit" />
</Tooltip>

Wordpress GutenBerg Block - React.Children.only 预计会收到一个 React 元素子元素

Wordpress GutenBurg Block - React.Children.only expected to receive a single React element child

javascript

wordpress

reactjs

wordpress-gutenberg