reactjs - 提供给“InfoWindow”的“array”类型的无效道具“children”，需要一个 ReactElement

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 提供了多个子反应元素，但我不知道我是如何做到的。如果错误消息被定向到带有所有标记子元素的 Map 是有道理的，任何帮助将不胜感激

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 或 Fragment 中

{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
}