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

admin管理员组

文章数量:1392105

I use react-bootstrap library ( .html#tooltips ) and I want to display multiple div's in a row, each single one with a tooltip.

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

This is the piece of code I have written to acplished that. Example blueprint object looks like that:

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

For unclear reason I get the error 'React.Children.only expected to receive a single React element child.' thrown by "OverlayTrigger".

I debugged it a little and I found that inside the OverlayTrigger this.props.children is an array and I assume that it is supposed to be an object, but I have no idea what is wrong. The child of OverlayTrigger is single div. Any ideas what's the reason for the error?

EDIT: Error is thrown by this:

.js#L263

children variable is an array instead of an object. I don't know why.

I use react-bootstrap library ( https://react-bootstrap.github.io/ponents.html#tooltips ) and I want to display multiple div's in a row, each single one with a tooltip.

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

This is the piece of code I have written to acplished that. Example blueprint object looks like that:

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

For unclear reason I get the error 'React.Children.only expected to receive a single React element child.' thrown by "OverlayTrigger".

I debugged it a little and I found that inside the OverlayTrigger this.props.children is an array and I assume that it is supposed to be an object, but I have no idea what is wrong. The child of OverlayTrigger is single div. Any ideas what's the reason for the error?

EDIT: Error is thrown by this:

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

children variable is an array instead of an object. I don't know why.

• javascript
• twitter-bootstrap
• reactjs
• tooltip
• react-bootstrap

Share Improve this question Follow edited Apr 20, 2017 at 19:20 Konrad Klimczak asked Apr 20, 2017 at 18:20 Konrad KlimczakKonrad Klimczak 1,53422 gold badges2222 silver badges4747 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Ok, I found out what was the problem. It was very specific case.

In short it was like this:

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

And SomeOtherComponent was modifying all of the it's children recursively. Simplifying SomeOtherComponent looked like this:

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

And this changed children from object to one item array. I've just replaced { this.cloneChildrenWithProps(children) } with { children } and it solve the problem.

Maybe this works:

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

The Examples in the doc contain exactly one child element - no multiple dimensions. ( https://react-bootstrap.github.io/ponents.html#tooltips-overlay-trigger )e.g.:

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

Wrap you { _.map ... } with single <div>

本文标签：