React bootstrap 工具提示抛出错误 'React.Children.only expected to receive a single React element child.'

Question

我使用 react-bootstrap 库 ( https://react-bootstrap.github.io/components.html#tooltips )，我想连续显示多个 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>
    );
}) }

这是我为此编写的一段代码。示例蓝图 object 看起来像这样：

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

由于不明原因，我收到“”抛出的错误“React.Children.only expected to receive a single React element child.” OverlayTrigger".

我稍微调试了一下，发现 OverlayTrigger this.props.children 里面是一个数组，我假设它应该是一个 object ，但我不知道出了什么问题。 OverlayTrigger的child是单div。知道错误的原因是什么吗？

编辑：错误由此抛出：

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

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

Answer 1

也许这行得通：

<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>

Answer 2

用单身<div>

包裹你{ _.map ... }

Answer 3

好的，我发现问题出在哪里了。这是非常具体的案例。

简而言之是这样的：

<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>
        );
    }
});

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

React bootstrap 工具提示抛出错误 'React.Children.only expected to receive a single React element child.'

React bootstrap Tooltip throws error 'React.Children.only expected to receive a single React element child.'

javascript

tooltip

twitter-bootstrap

reactjs

react-bootstrap