[英]React bootstrap Tooltip throws error 'React.Children.only expected to receive a single React element child.'
I use react-bootstrap library ( https://react-bootstrap.github.io/components.html#tooltips ) and I want to display multiple div's in a row, each single one with a tooltip. 我使用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>
);
}) }
This is the piece of code I have written to accomplished that. 这是我写完的代码片段。 Example blueprint object looks like that:
示例蓝图对象如下所示:
[
{
"id": "123442b4d432d10008c650f7",
"name": "Example Blueprint",
"components": [
{
"name": "Apache",
"module": "apache",
"version": "9000"
}
]
}
]
For unclear reason I get the error ' React.Children.only expected to receive a single React element child. 由于不明原因,我收到错误' React.Children.only预计会收到一个React元素子。 ' thrown by " OverlayTrigger ".
'抛出“ 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. 我调试了一下,我发现在OverlayTrigger中, this.props.children是一个数组,我认为它应该是一个对象,但我不知道出了什么问题。 The child of OverlayTrigger is single div.
OverlayTrigger的孩子是单个div。 Any ideas what's the reason for the error?
任何想法错误的原因是什么?
EDIT: Error is thrown by this: 编辑:错误被抛出:
https://github.com/react-bootstrap/react-bootstrap/blob/master/src/OverlayTrigger.js#L263 https://github.com/react-bootstrap/react-bootstrap/blob/master/src/OverlayTrigger.js#L263
children variable is an array instead of an object. children变量是一个数组而不是一个对象。 I don't know why.
我不知道为什么。
Maybe this works: 也许这有效:
<OverlayTrigger key={ i } placement='top' overlay={ tooltip }>
<ImageIcon name={ component.name } size='small'/>
</OverlayTrigger>
The Examples in the doc contain exactly one child element - no multiple dimensions. doc中的示例只包含一个子元素 - 没有多维。 ( https://react-bootstrap.github.io/components.html#tooltips-overlay-trigger )eg:
( https://react-bootstrap.github.io/components.html#tooltips-overlay-trigger )例如:
<OverlayTrigger placement="top" overlay={tooltip}>
<Button bsStyle="default">Holy guacamole!</Button>
</OverlayTrigger>
用单个<div>
包裹{ _.map ... }
Ok, I found out what was the problem. 好的,我发现了什么问题。 It was very specific case.
这是非常具体的案例。
In short it was like this: 总之,它是这样的:
<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>
And SomeOtherComponent was modifying all of the it's children recursively. 并且SomeOtherComponent以递归方式修改了它的所有子节点。 Simplifying SomeOtherComponent looked like this:
简化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>
);
}
});
And this changed children from object to one item array. 这将孩子从对象改为一个项目数组。 I've just replaced
{ this.cloneChildrenWithProps(children) }
with { children }
and it solve the problem. 我刚刚用
{ this.cloneChildrenWithProps(children) }
替换了{ this.cloneChildrenWithProps(children) }
{ children }
,它解决了这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.