JS/Reactjs - accéder à un paramètre transmis à partir de la fonction de niveau supérieur

Question

Box.expandBox(id); 


var Box= (function(){ 
    return { 
    expandBox: function(id) { 
     console.log('inside expandBox: ' + id); 
     ReactDOM.render(React.createElement(this.pBox(id)), document.getElementById('activate')) 
    }, 
    pBox: function(id) {  
     console.log('inside pBox: '+ id); 
     return React.createClass({ 
      getInitialState: function(id) { 
       console.log('inside getInitialState: '+ id); 
       return { 
        person_id: id 
       } 
      }, 

     ........ 

Essayer d'affecter l'état person_id au id qui est passé à l'extérieur. J'ai réussi à sortir les données à pBox mais les données sont perdues dans la fonction enfant de React. J'ai essayé de faire l'affectation var self = this mais en vain. Je suis perdu à la portée quand il s'agit de JS.

Answer 1

Actuellement, la id est assombrie par l'argument de getInitialState(id) et de devenir undefined parce getInitialState est appelée sans aucun argument.

Donc, supprimez l'argument et vous pouvez utiliser le id fourni dans la méthode pBox dans getInitialState().

pBox: function(id) {  
    console.log('inside pBox: '+ id); 
    return React.createClass({ 
     getInitialState: function() { 
      console.log('inside getInitialState: '+ id); 
      return { 
       person_id: id 
      } 
     }, 

Answer 2

La fonction getInitialState attend un argument pour id. S'il n'en reçoit pas, il y a toujours un id dans cette portée locale mais il contient undefined. Comme mentionné par @Shuhei, supprimer cet argument de la fonction ou lui donner un nom différent vous permettra d'accéder au id sur une portée plus élevée.

Pour des raisons de lisibilité, je vous recommande de séparer React.CreateClass dans une autre fonction.

Votre nouvelle fonction ressemblerait à quelque chose comme ceci:

function foo(id){ 
    console.log('inside pBox: '+ id); 
    return React.CreateClass({...}) //Same code you had before 
} 

Et votre code ressemblerait à quelque chose comme ceci:

Box.expandBox(id); 


var Box= (function(){ 
    return { 
    expandBox: function(id) { 
     console.log('inside expandBox: ' + id); 
     ReactDOM.render(React.createElement(this.pBox(id)), document.getElementById('activate')) 
    }, 
    pBox: foo 

....