我使用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变量是一个数组而不是一个对象。我不知道为什么。
答案 0 :(得分: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>
答案 1 :(得分:1)
用{ _.map ... }
<div>
答案 2 :(得分:0)
好的,我发现了问题所在。这是非常具体的案例。
简而言之就是这样:
<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 }
并解决了问题。