javascript - 使用 Google Maps API 将 int 值从一个 React 组件传递到另一个组件

Question

我正在尝试从一个组件(文件)传递纬度和经度数据，以响应实际构建和渲染谷歌地图组件的组件(文件)。每次我尝试对传入的参数进行控制台日志时，它都会返回一个空数组。

我正在传递一个浮点值，但尝试将此值放入数组中并传递它，以及尝试传递字符串，但所有内容都返回一个空数组。

<GoogleMapsContainer
 lat={latVal} //latVal and longVal are float values (tested using console log)
 long={longVal}
 />

---------------------------------------------------
class GoogleMapsContainer extends React.Component {
constructor(props, lat, long) { //passing in lat and long here
 super(props);
  //using console.log statement here
 this.state = {
  showingInfoWindow: false,
  activeMarker: {},
  selectedPlace: {},
  latV: lat,
  longV: long
}

// binding this to event-handler functions
this.onMarkerClick = this.onMarkerClick.bind(this);
this.onMapClick = this.onMapClick.bind(this);
}

当我按照指示执行控制台日志时，我应该期望看到正确的浮点值，但它只是打印出 {}。我传递的值是否正确？

Answer 1

您不需要向构造函数传递额外的参数。只需通过 props 访问您的值即可。请参阅codesandbox 例如:https://codesandbox.io/s/gallant-ellis-76bdv

class GoogleMapsContainer extends React.Component {
  constructor(props){
    super(props);
    this.state = {
       showingInfoWindow: false,
       activeMarker: {},
       selectedPlace: {},
       latV: props.lat,
       longV: props.long
    }
  }