Reactjs 如何更改谷歌地图多边形'；s样式选项悬停？

我无法使用onMouseOver/onMouseOut事件获取要显示/隐藏的多边形

到目前为止，我已经尝试通过

this

直接操作选项，并使用通过props传递的父级状态和三元运算符作为选项值

const Map = compose(
  withProps({
    googleMapURL:
      'https://maps.googleapis.com/maps/api/js?key=${APIKEY}&callback=initMap',
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: '100%' }} />,
    mapElement: <div style={{ height: `100%` }} />
  }),
  withScriptjs,
  withGoogleMap
)(props => {
  return (
    <GoogleMap
      center={{ lat: 40.726, lng: -74.006 }}
      defaultOptions={{
        mapTypeId: 'roadmap',
        zoom: 16,
        minZoom: 15.5,
        maxZoom: 18,
        streetViewControl: false,
        scaleControl: false,
        mapTypeControl: false,
        clickableIcons: false,
        panControl: false,
        zoomControl: true,
        rotateControl: false,
        scrollWheel: false,
        gestureHandling: 'greedy'
      }}
    >

        <Polygon
          path={[
            { lat: 40.7290705, lng: -74.0105223 },
            { lat: 40.727603, lng: -74.0106457 },
            { lat: 40.7262451, lng: -74.0108174 },
            { lat: 40.7258874, lng: -74.0108495 },
            { lat: 40.72481, lng: -74.0092724 },
            { lat: 40.7241352, lng: -74.0083496 },
            { lat: 40.7234522, lng: -74.0073894 },
            { lat: 40.7221187, lng: -74.0054582 },
            { lat: 40.7222569, lng: -74.0054582 },
            { lat: 40.7255256, lng: -74.0041064 },
            { lat: 40.727729, lng: -74.0032052 },
            { lat: 40.7283306, lng: -74.0032159 },
            { lat: 40.7285908, lng: -74.0057479 },
            { lat: 40.7288347, lng: -74.0082156 },
            { lat: 40.7290705, lng: -74.0105223 }
          ]}
          options={{
            strokeColor: '#369BF7',
            strokeOpacity: props.neighborhood.westVillage ? 1 : 0,
            fillOpacity: props.neighborhood.westVillage ? 1 : 0,
            strokeWeight: 1,
            fillColor: '#369BF7'
          }}
          onMouseOver={() => {
            console.log('westVillage');
            props.toggleNeighborhoodVisibility('westVillage');
          }}
          onMouseOut={() => {
            console.log('off');
            props.toggleNeighborhoodVisibility('westVillage');
          }}
        />
     </GoogleMap>
  );
});

class MapContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      neighborhood: {
        soho: false,
        tribeca: false,
        hudsonSquare: false,
        westVillage: false
      }
    };
  }

  toggleNeighborhoodVisibility = section => {
    const { neighborhood } = this.state;
    neighborhood[section] = !neighborhood[section];
    this.setState({
      neighborhood
    });
  };

  render() {
    const { neighborhood } = this.state;
    return <Map neighborhood={neighborhood} toggleNeighborhoodVisibility={this.toggleNeighborhoodVisibility} />;
  }
}

const Map=compose(
用道具({
谷歌地图网址：
'https://maps.googleapis.com/maps/api/js?key=${APIKEY}&callback=initMap'，
加载元素：，
集装箱运输：，
mapElement：
}),
用ScriptJS，
用谷歌地图
)（道具=>{
返回(
{
控制台日志（“westVillage”）；
道具。toggleNeighborhoodVisibility（“westVillage”）；
}}
onMouseOut={（）=>{
控制台。登录（“关闭”）；
道具。toggleNeighborhoodVisibility（“westVillage”）；
}}
/>
);
});
类MapContainer扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
邻居：{
soho：错，
特里贝卡：错，
哈德逊广场：错，
西村：错
}
};
}
toggleNeighborhoodVisibility=区段=>{
const{neighborary}=this.state；
邻域[部分]=！邻域[部分]；
这是我的国家({
邻里
});
};
render（）{
const{neighborary}=this.state；
返回；
}
}
< /代码> 在您的示例中使用，您可以考虑通过“
”将附加参数传递给<代码> ToGelEnEngBuloHooDeopield<<代码> >
在哪里



说明：


polygonRef
ref用于访问多边形组件

供参考

withHandlers({
    handleMouseEvent: props => event => {
      const polygon = props.polygonRef.current.state[POLYGON]; //polygon instance
      props.toggleNeighborhoodVisibility("westVillage", polygon);
    }
})

<Polygon
    ref={props.polygonRef}
    //...
    onMouseOver={props.handleMouseEvent}
    onMouseOut={props.handleMouseEvent}
/>