Question

我使用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"
            }
        ]
    }
]

由于不明原因，我收到错误' React.Children.only预计会收到一个React元素子项。'由“ OverlayTrigger ”抛出。

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

编辑：这引发了错误：

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

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

Answer 1

也许这有效：

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

doc中的示例恰好包含一个子元素 - 没有多个维度。（https://react-bootstrap.github.io/components.html#tooltips-overlay-trigger）例如：

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

Answer 2

用{ _.map ... }

包裹<div>

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 Tooltip抛出错误'React.Children.only预计会收到一个React元素子元素。

3 个答案: