javascript - 有人可以澄清这些参数是如何传递的吗？

Question

我还没有太多经验，我需要澄清JS中的功能组件和箭头函数。我已经查过这些，但在实践中我仍然有点困惑。对于一个项目，我的团队正在使用交互式地图资源，我的团队成员将这个功能放在一起，但他们并不擅长解释它。我目前的想法：handleGeocoderViewportChange应该是函数，viewport是参数，它在传递参数viewport和geocoderDefaultOverrides的属性后返回另一个函数handleViewportChange的结果。当我们在另一个组件中创建此类的对象时，会传入 viewport 之类的道具，例如

class Map extends Component {
  mapRef = React.createRef();
....
....
handleViewportChange = viewport => {
    this.props.setViewport(
      { ...this.props.viewport, ...viewport }
    );};
handleGeocoderViewportChange = viewport => {
    const geocoderDefaultOverrides = { transitionDuration: 1000 };
    return this.handleViewportChange({
      ...viewport,
      ...geocoderDefaultOverrides
    });
};

我不明白的是，当我们调用返回中的函数时，我没有看到像视口这样的参数被传递给handleGeocoderViewportChange。如果我们的类定义没有将其定义为： Maps(props) extends .... 那么这些参数究竟是如何传递的，我也不明白从创建对象时如何自动传递道具？

return(){
    <MapGL
      ref={this.mapRef}
      {...this.props.viewport}
      width="100%"
      height="100%"
      onViewportChange={this.handleViewportChange}
      mapboxApiAccessToken={MAPBOX_TOKEN}
      mapStyle='mapbox://styles/mapbox/streets-v11'
    >
      <Geocoder
        mapRef={this.mapRef}
        onResult={this.props.handleSearch}
        onViewportChange={this.handleGeocoderViewportChange}
        mapboxApiAccessToken={MAPBOX_TOKEN}
        position="top-left"
      />

标签： javascriptreactjs