Javascript 如何将const变量传递给事件处理程序

我刚刚开始学习ReactJS。这将是一个公共交通网络应用程序。我刚刚开始了解不同组件之间的连接是如何工作的

如何将

dataOne

和

dataTwo

变量（即站点名称）传递给onClick事件处理程序，以便在

StationOne

组件上使用它们

import React from 'react'
import { Link } from 'react-router-dom'

import StationOne from '../components/station-one.component'

const HomePage = () => {
  const geoSucess = (loca) => {
    let lat = loca.coords.latitude
    let long = loca.coords.longitude

    const url = `http://transport.opendata.ch/v1/locations?limit=2&x=${lat}&y=${long}`
    fetch(url)
      .then((resp) => resp.json())
      .then((data) => fetchApi(data))
  }

  const geoError = (erro) => {
    console.log(erro, 'Something went wrong')
  }

  window.navigator.geolocation.getCurrentPosition(geoSucess, geoError)

  const fetchApi = (data) => {
    const yourAdress = document.getElementById('yourAdress')
    deineAdresse.innerHTML = data.stations[0].name

    const nameStationOne = document.getElementById('.nameStationOne')
    const dataOne = data.stations[1].name
    nameStationEins.innerHTML = dataOne

    const nameStationTwo = document.getElementById('.nameStationTwo')
    const dataTwo = data.stations[2].name
    nameStationZwei.innerHTML = dataTwo

  return (
    <div>
      <h1>Your Location:</h1>
      <h3 id='yourAdress'></h3>
      <h2>Stations near your location:</h2>
      <Link to='/first-connection' onClick={StationOne}>
        <h3 id='nameStationEins'></h3>
      </Link>
      <h3 id='nameStationTwo'></h3>
      <br />
      <Link to='/second-connection' onClick={StationOne}>
        <h3 id='nameStationTwo'></h3>
      </Link>
    </div>
  )
}
export default HomePage

从“React”导入React
从“react router dom”导入{Link}
从“../components/station one.component”导入StationOne
const主页=（）=>{
常数地球静止轨道=（loca）=>{
设lat=loca.coords.latitude
设long=loca.coords.longitude
常量url=`http://transport.opendata.ch/v1/locations?limit=2&x=${lat}&y=${long}`
获取（url）
.然后（（resp）=>resp.json（））
.然后（（数据）=>fetchApi（数据））
}
常量地理错误=（错误）=>{
log（erro，“出了点问题”）
}
window.navigator.geolocation.getCurrentPosition（geoSucess，geoError）
常量fetchApi=（数据）=>{
const yourAddress=document.getElementById（'yourAddress'）
deineAdresse.innerHTML=data.stations[0]。名称
const nameStationOne=document.getElementById（'.nameStationOne'）
const dataOne=data.stations[1]。名称
nameStationEins.innerHTML=dataOne
const namestationwo=document.getElementById（'.namestationwo'）
const dataTwo=data.stations[2]。名称
nameStationZwei.innerHTML=dataTwo
返回(
您的位置：
靠近您所在位置的站点：


)
}
导出默认主页

---

在

StationOne

组件中，我将使用它们作为变量。这样我就可以将它们放入新的获取中，以搜索下一个连接。

如果StationOne是一个函数/处理程序，您可以这样做

 <Link to='/second-connection' onClick={() => StationOne(dataOne,dataTwo)}>
  <h3 id='nameStationTwo'></h3>
</Link>

StationOne（dataOne，dataTwo）}>

但是，看看您如何命名它，我怀疑它是一个事件处理程序。再说一遍，StationOne是如何定义的。通常将参数作为道具传递给组件。StationOne是回调函数/处理程序或组件。此外，如果您计划在大型团队中工作，您应该研究命名约定。通常，

PascalCase

为组件保留，而

camelCase

为回调保留。从外观上看，你用一个组件来代替回调，这让人困惑

另一个令人困惑的地方是，您在

react router dom

的

链接上使用的
onClick
处理程序没有onClick属性

如果您想使用带有链接的组件，请查看它的道具。
您的站姿是什么样子的。通常你会将参数作为道具传递给组件。点击这些道具将改变应用程序的路径；各个组件由支持URL参数的
元素呈现。所以你可以做
}
。通过这种方式，您可以执行
并在
StationOne
组件中使用
This.props.match.params.station
来获取站点名称。通常，从一个子节点向另一个子节点发送数据的方法是将数据向上传递（通过设置父节点的状态），然后作为prop返回到相邻的子节点。