提供给 '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

这正是 error/warning 消息的意思。

InfoWindow

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
}

提供给 'InfoWindow' 的 'array' 类型的无效道具 'children'，需要一个 ReactElement

Invalid prop 'children' of type 'array' supplied to 'InfoWindow', expected a single ReactElement

reactjs

google-map-react