如何在 JSX 导出函数中调用函数？

Question

这是我的 home.js 文件（React App）中的部分代码：

function pin(){
  var url = "http:myurl"
  axios.get(url)
  .then((res)=>{
    if(res.data){
      var txt = JSON.stringify(res.data)
      var lat = res.latitude
      var lng = res.longitude
      var nivel = res.nivel
      alert(lat)
    }
  })
}

export default function App(){
  const{isLoaded, loadError} = useLoadScript({
    googleMapsApiKey: "mygoogleapikey",
    libraries,
  })

  const [markers, setMarkers] = React.useState([]);
  if(loadError) return "Erro a carregar o mapa"
  if(!isLoaded) return "Carregando"

  return <div>
    <GoogleMap 
    mapContainerStyle={mapContainerStyle} 
    zoom={11} 
    center={center}
    >

    <Marker
      position={{ lat: 40.661096, lng:-7.910098}}
      icon={nivelpin.verde}
    >
    </Marker>

    </GoogleMap>
    
  </div>
}

如何在 return 中调用 pin() 函数？现在我只想看到警报，看看我写的是否正确，但后来我也想在 return 中使用它，那么我该怎么做呢？

Answer 1

从根组件（在本例中为 <div>）内部调用 pin()。任何代码逻辑都需要用大括号括起来 {}

return <div>
    { pin() }
    <GoogleMap 
    mapContainerStyle={mapContainerStyle} 
    zoom={11} 
    center={center}
    >

    <Marker
      position={{ lat: 40.661096, lng:-7.910098}}
      icon={nivelpin.verde}
    >
    </Marker>

    </GoogleMap>
    
  </div>

如何在 JSX 导出函数中调用函数？

How to call a function inside JSX exported function?

javascript

google-api

reactjs