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提供了多个子反应元素，但我看不到我是怎么做的。如果将错误消息与所有Marker子元素一起定向到Map，这是有道理的，将不胜感激

Answer 1

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

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'类型的无效prop'children'，需要一个ReactElement

1 个答案: