Passer des rappels/paramètres arbitraires dans React

Question

Je souhaite passer des rappels à un composant de mappage, ce qui nécessite de pouvoir donner les arguments souhaités. J'essaie avec

MapView.js:

import React, { Component } from 'react'; 
import { browserHistory } from 'react-router'; 


export default class MapView extends Component { 

    constructor(props){ 
     super(props); 
     this.renderMap = this.renderMap.bind(this); 
     this.addMarkerToMap = this.addMarkerToMap.bind(this); 
     this.clickMarker = this.clickMarker.bind(this); 
    } 

    componentDidMount() { 
     this.renderMap(); 
    } 

    renderMap() { 
     let map_data = { 
      zoom: this.props.zoom || 10, 
      center: this.props.center || {lat: 30.3, lng: -97.75} // default to Austin 
     }; 

     let this_map = new google.maps.Map(this.refs.map, map_data); 

     let markers_data = this.props.markers_data || []; 
     markers_data.map(function(data) { 
      this.addMarkerToMap(data, this_map); 
     }.bind(this)); 
    } 

    addMarkerToMap(data, the_map) { 
     let marker = new google.maps.Marker({ 
      position: data.coordinates, 
      map: the_map 
     }); 
     if (data.callback) { 
      let params = data.params || []; 
      marker.addListener('click', data.callback.bind(this, ...params)); 
     } 
     return marker 
    } 

    clickMarker(item_id, pathname) { 
     // http://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router 
     browserHistory.push(
      { 
       pathname: pathname, 
       query: { item_id: item_id } // https://stackoverflow.com/questions/36350644/how-can-i-pass-parameters-on-redirection-using-react-router 
      } 
     ); 
    } 

    render() { 
     return (
      <div> 
       <h3>{this.props.title}</h3> 
       <p>{this.props.description}</p> 
       <div style={ {height: 500, width: 500 } } ref="map" /> 
      </div> 
     ) 
    } 
} 

MapShowCustomers.js:

import React, {Component} from "react"; 
import { browserHistory } from 'react-router'; 

import MapView from './MapView'; 


export default class MapShowCustomers extends Component { 

    constructor(props){ 
     super(props); 
     this.clickMarker2 = this.clickMarker2.bind(this); 
     this.exampleCallback = this.exampleCallback.bind(this); 
    } 

    clickMarker2(pathname, item_id) { 
     alert(pathname); 
     // http://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router 
     browserHistory.push(
      { 
       pathname: pathname, 
       query: { item_id: item_id } // https://stackoverflow.com/questions/36350644/how-can-i-pass-parameters-on-redirection-using-react-router 
      } 
     ); 
    } 

    exampleCallback(text) { 
     console.log(text) 
     if (text) { 
      alert(text); 
     } else { 
      alert("it worked anyway"); 
     } 
    } 

    render() { 
     let titleText = "This one to show customers for restaurant employees...more of a map example"; 
     let description = "Notice the usage of the 'center' prop...by overwriting the default center, this one shows up in Illinois (center={ {lat: 40.3, lng: -88.75} })" 
     let coordinates = {lat: 40.3, lng: -88.75}; 
     let markersData = [ 
      // {callback: this.clickMarker2, args: ['/profile-customer', 2], coordinates: {lat: 40.25, lng: -88.65}}, 
      // {callback: this.clickMarker2, args: ['/profile-customer', 7], coordinates: {lat: 40.35, lng: -88.85}}, 
      // {callback: this.clickMarker2, args: ['/profile-customer', 6], coordinates: {lat: 40.37, lng: -88.78}} 
      {callback: this.exampleCallback, params: ["blah"], pathname: '/profile-customer', item_id: 1, coordinates: {lat: 40.25, lng: -88.65}}, 
      {callback: this.exampleCallback, params: ["blah"], pathname: '/profile-customer', item_id: 13, coordinates: {lat: 40.35, lng: -88.85}}, 
      {callback: this.exampleCallback, pathname: '/profile-customer', item_id: 37, coordinates: {lat: 40.37, lng: -88.78}} 
     ]; 

     {/* look at the center prop for how to pass props...in GoogleMap component it defaults to Austin */} 
     return (
      <div> 
       <MapView markers_data={markersData} center={coordinates} title={titleText} description={description}/> 
      </div> 
     ); 
    } 
} 

J'essaie passer à travers sans {callback: this.exampleCallback, pathname: '/profile-customer', item_id: 37, coordinates: {lat: 40.37, lng: -88.78}} params voir exampleCallback alerte "cela a fonctionné quand même" en faisant

if (data.callback) { 
      let params = data.params || []; 
      marker.addListener('click', data.callback.bind(this, ...params)); 
} 

mais maintenant je vois ceci:

et il veut alerter [object Object] au lieu de « il a travaillé de toute façon ». Ce code peut être vu à this repo (pour l'essayer, utilisez npm i; npm start).

Answer 1

Dans addMarkerToMap:

if (data.callback) { 
    let params = data.params || [undefined]; 
    marker.addListener('click', data.callback.bind(this, ...params)); 
} 

Le ...params dépaquète un tableau en paramètres distincts, par exemple en cours d'exécution data.callback.bind(this, ...[1, 2, 3) décompresse à data.callback.bind(this, 1, 2, 3). Ceci est une nouvelle fonctionnalité dans ES6. Par défaut à [undefined], vous finissez par décompresser à data.callback.bind(this, undefined), qui est ignoré si votre rappel n'a pas besoin d'arguments.