React 引导工具提示抛出错误“React.Children.only 预计会收到单个 React 元素子项。”答案

【问题标题】：React bootstrap Tooltip throws error 'React.Children.only expected to receive a single React element child.'React 引导工具提示抛出错误“React.Children.only 预计会收到单个 React 元素子项。”
【发布时间】：2017-09-17 12:45:37
【问题描述】：

我使用 react-bootstrap 库 (https://react-bootstrap.github.io/components.html#tooltips)，我想连续显示多个 div，每个 div 都有一个工具提示。

{ _.map(blueprint.components, (component, i) => {
    const tooltipId = 'tooltip-' + _.replace(blueprint.name, ' ', '-') + '-' + _.replace(component.name, ' ', '-');
    const tooltip = (
        <Tooltip id={ tooltipId }>
            test
        </Tooltip>
    );
    return (
        <div>
            <OverlayTrigger key={ i } placement='top' overlay={ tooltip }>
                <div>
                    <ImageIcon name={ component.name } size='small'/>
                </div>
            </OverlayTrigger>
        </div>
    );
}) }

这是我为实现这一目标而编写的一段代码。示例蓝图对象如下所示：

[
    {
        "id": "123442b4d432d10008c650f7",
        "name": "Example Blueprint",
        "components": [
            {
                "name": "Apache",
                "module": "apache",
                "version": "9000"
            }
        ]
    }
]

由于不清楚的原因，我收到了由“OverlayTrigger”引发的错误“React.Children.only 预计会收到单个 React 元素子项。”。

我调试了一下，发现 OverlayTrigger this.props.children 内部是一个数组，我认为它应该是一个对象，但我不知道出了什么问题. OverlayTrigger 的子元素是单个 div。任何想法错误的原因是什么？

编辑：错误由此引发：

https://github.com/react-bootstrap/react-bootstrap/blob/master/src/OverlayTrigger.js#L263

children 变量是一个数组而不是一个对象。我不知道为什么。

【问题讨论】：

标签： javascript twitter-bootstrap reactjs tooltip react-bootstrap

【解决方案1】：

好的，我发现了问题所在。这是一个非常具体的案例。

简而言之就是这样：

<SomeOtherComponent>
    { _.map(blueprint.components, (component, i) => {
        const tooltipId = 'tooltip-' + _.replace(blueprint.name, ' ', '-') + '-' + _.replace(component.name, ' ', '-');
        const tooltip = (
            <Tooltip id={ tooltipId }>
                test
            </Tooltip>
        );
        return (
            <div>
                <OverlayTrigger key={ i } placement='top' overlay={ tooltip }>
                    <div>
                        <ImageIcon name={ component.name } size='small'/>
                    </div>
                </OverlayTrigger>
            </div>
        );
    }) }
</SomeOtherComponent>

并且 SomeOtherComponent 正在递归地修改它的所有子级。简化 SomeOtherComponent 看起来像这样：

const SomeOtherComponent = createClass({
    cloneChildrenWithProps(children) {
        return React.Children.map(children, child => {
            return child;
        });
    },
    render() {
        const { children } = this.props;
        return (
            <div>
                { this.cloneChildrenWithProps(children) }
            </div>
        );
    }
});

这将子对象从对象更改为一个项目数组。我刚刚用{ children } 替换了{ this.cloneChildrenWithProps(children) }，它解决了问题。

【讨论】：

【解决方案2】：

也许这行得通：

<OverlayTrigger key={ i } placement='top' overlay={ tooltip }>
  <ImageIcon name={ component.name } size='small'/>
</OverlayTrigger>

文档中的示例仅包含一个子元素 - 没有多个维度。 (https://react-bootstrap.github.io/components.html#tooltips-overlay-trigger)例如：

<OverlayTrigger placement="top" overlay={tooltip}>
  <Button bsStyle="default">Holy guacamole!</Button>
</OverlayTrigger>

【讨论】：

我添加了其他信息，但不幸的是，您的解决方案没有帮助。

【解决方案3】：

用单个 <div> 包裹你的 { _.map ... }

【讨论】：

地图已经在一个
中了，但我认为这与问题无关。