提供给"信息窗口"的"数组"类型的无效道具"子项"，需要单个反应元素

Question

render() {
const { showingInfoWindow, activePosition, selected } = this.state;
return (
<Map
google={this.props.google}
zoom={8}
initialCenter={{ lat: 89, lng: -53 }}
>
{this.displayMarkers()}
{showingInfoWindow ? (<InfoWindow position={this.state.activePosition} visible={this.state.showingInfowindow} onClose={this.onClose}>
<div>
<bold>Title: </bold>
{this.state.selected.title}
</div>
<div>
<bold>Description: </bold>
{this.state.selected.description}
</div>
</InfoWindow>) : null}
</Map>
);
}

我检查了其他答案，似乎此错误消息意味着我正在向 InfoWindow 提供多个子反应元素，但我不明白我是如何做到的。如果错误消息被定向到包含所有标记子元素的地图是有意义的，任何帮助将不胜感激

Answer 1

这正是该错误/警告消息的含义。

信息窗口

InfoWindow.propTypes = {
children: PropTypes.element.isRequired, // <-- allows single child only
map: PropTypes.object,
marker: PropTypes.object,
position: PropTypes.object,
visible: PropTypes.bool,
// callbacks
onClose: PropTypes.func,
onOpen: PropTypes.func
}

您可以将它们包装在div 或片段中

{showingInfoWindow ? (
<InfoWindow position={this.state.activePosition} visible={this.state.showingInfowindow} onClose={this.onClose}>
<Fragment>
<div>
<bold>Title: </bold>
{this.state.selected.title}
</div>
<div>
<bold>Description: </bold>
{this.state.selected.description}
</div>
</Fragment>
</InfoWindow>)
: null
}