显示:没有在React组件中不工作

时间:2018-09-11 18:14:49

标签: reactjs

我有一个为Google地图创建2000个标记的组件,并且我将安装一个脚本以根据条件使它们可见/隐藏。在此期间,我只是测试并发现我无法获得显示:无论是作为内联样式还是通过变量输入,都无法在组件上工作。这是当前代码(该组件正在父组件的return函数中访问)。样式显示在return语句中:

const CoordinatesFunction = (props) => {
  let RunCoordinates = _.times(2000, function() {
    let longitude = (Math.random() * (170 - -170) + -170).toFixed(7) * 1;
    let latitude = (Math.random() * (80 - -80) + -80).toFixed(7) * 1;
    let url = "";
    let nwRef = React.createRef();    
        if (latitude >=0 && latitude <= 90 && longitude >= -180 && longitude <= 0) {
            url="https://maps.google.com/mapfiles/ms/icons/blue.png";
            {props.store.dispatch(IncreaseNorthwest());}          

          } else if ( latitude <=0 && latitude >= -90 && longitude >= -180 && longitude <= 0 ) {
            url="https://maps.google.com/mapfiles/ms/icons/yellow.png";
            {props.store.dispatch(IncreaseSouthwest());}

          } else if ( latitude >=0 && latitude <= 90 && longitude >= 0 && longitude <= 180 ) {
            url="https://maps.google.com/mapfiles/ms/icons/green.png";
            {props.store.dispatch(IncreaseNortheast());}

          } else if ( latitude <=0 && latitude >= -90 && longitude >= 0 && longitude <= 180 ) {
            url="https://maps.google.com/mapfiles/ms/icons/red.png";
            {props.store.dispatch(IncreaseSoutheast());}
          }
    return <div key={Math.random()} ref={nwRef} style={{ display: 'none' }}>
      <Marker
          position={{lat: latitude, lng: longitude}}
          icon={{ url: url,
        scaledSize: new google.maps.Size(25, 25), size: new google.maps.Size(22, 22) }}
      >
      </Marker>
    </div>
  })
  return(<div>{RunCoordinates}</div>)
}

0 个答案:

没有答案