ReactJS-这是反模式吗?

时间:2018-06-29 12:59:33

标签: javascript reactjs

import React, { Component } from "react";
import { Marker, InfoWindow } from "react-google-maps";
import { labeledIcon } from "./Icons";

let closeInfoWindowFn;

class MapMarker extends Component {
  state = {
    infoWindowOpen: false
  };

  closeInfoWindow = () => {
    console.log("closeInfoWindow");
    this.setState({ infoWindowOpen: false });
  };

  openInfoWindow = () => {
    console.log("openInfoWindow");
    const isOpen = this.state.infoWindowOpen;
    if (!isOpen) this.setState({ infoWindowOpen: true });
    if (
      (closeInfoWindowFn && closeInfoWindowFn !== this.closeInfoWindow) ||
      isOpen
    )
      closeInfoWindowFn();
    closeInfoWindowFn = this.closeInfoWindow;
  };

  render() {
    const props = this.props;
    return this.state.infoWindowOpen && props.infoWindowLabel;
  }
}

export default MapMarker;

为了确保一次在带有多个标记的google地图上一次打开一个infoWindow,我定义了一个变量closeInfoWindowFn,它指向的closeInfoWindow方法先前打开的InfoWindow

当单击另一个标记时,将在openInfoWindow中调用该函数。

它有效,但是它是反模式吗?

0 个答案:

没有答案