Wordpress GutenBerg 块 - React.Children.only 预计会收到单个 React 元素子元素答案

【问题标题】：Wordpress GutenBurg Block - React.Children.only expected to receive a single React element childWordpress GutenBerg 块 - React.Children.only 预计会收到单个 React 元素子元素
【发布时间】：2019-08-03 22:45:39
【问题描述】：

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

Invariant Violation：最小化 React 错误 #143；访问https://reactjs.org/docs/error-decoder.html?invariant=143

React.Children.only 期望接收单个 React 元素子

这是我正在尝试的代码。

<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() 返回svg 图标我也试过Dashicon 它不起作用这意味着问题不在geticon() 函数中。

我也试过这样。

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

【问题讨论】：

getIcon 函数是什么样的？请在您的问题中包含这一点。
getIcon() 是一个返回 svg 的函数，请检查更新

标签： javascript wordpress reactjs wordpress-gutenberg

【解决方案1】：

getIcon 函数中一定存在一些问题，我尝试过 Dashicon 对我来说工作正常。您可能错过了从wp-components 导入Dashicon

试试这个。

const { Tooltip, Dashicon } = wp.components;

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

【讨论】：