React.JS Невозможно прочитать свойство в контуре массива

Question

У меня есть следующий код.

var ImageList = React.createClass({ 
getComponent: function(index){ 
     console.log(index); 
}, 
render: function() { 
var results = this.props.data; 
return (
    <div className="row"> 
    {results.map(function(result) { 
     return(
       <a className="th medium-3 columns" href="#" onClick= {this.getComponent.bind(this, 1)}> 
       <img alt="Embedded Image" key={result.id} src={"data:" + result.type + ";" + "base64," + result.image} /> 
       </a> 
    )  
    })} 
    </div> 
); 
} 
}); 

Вторая функция возврата в основном петли массива изображений и показывает их. Я хотел, чтобы событие OnClick, когда щелкнуло, должно вызвать метод getComponent. Однако если OnClick события в цикле массива он выдает следующее сообщение об ошибке:

Uncaught TypeError: Cannot read property 'getComponent' of undefined.

Однако, если я использую тот же код и просто добавить onClick даже после петлевой функции, как показано ниже:

var ImageList = React.createClass({ 
getComponent: function(index){ 
     console.log(index); 
}, 
render: function() { 
var results = this.props.data; 
return (
    <div className="row"> 
    {results.map(function(result) { 
     return(
       <img alt="Embedded Image" key={result.id} src={"data:" + result.type + ";" + "base64," + result.image} /> 
    )  
    })} 
    <a className="th medium-3 columns" href="#" onClick= {this.getComponent.bind(this, 1)}> 
    </div> 
); 
} 
}); 

Заканчивается работа отлично. Но так как мне нужно сохранить уникальный идентификатор для каждого изображения, тогда я могу завершить оставшуюся функцию getComponent, второй метод для меня не очень полезен. Следовательно, есть ли способ заставить его работать в Loop?

Answer 1

Изменение сферы применения в рамках метода .map:

{results.map(function(result) { 
    // `this` is different inside this anonymous function 
})} 

То, что вы хотите сделать, это либо использовать толстый синтаксис стрелки ES6' , которая автоматически создает анонимную функцию с той же областью или хранить ток объем этого в переменной:

ES6 Жир Стрелка (read more here):

render: function() { 
    var results = this.props.data; 
    return (
     <div className="row"> 
     {results.map((result) => { 
      return(
       <a className="th medium-3 columns" href="#" onClick={that.getComponent.bind(that, 1)}> 
        <img alt="Embedded Image" key={result.id} src={"data:" + result.type + ";" + "base64," + result.image} /> 
       </a> 
      ) 
     })} 
     </div> 
    ); 
    } 
}); 

Обратите внимание, что вам понадобится транспилер - например, babel.io - для его изменения в ES2015, который в настоящее время понимают браузеры. Это считается «лучшей практикой», поскольку ES6/7 обеспечивает лучшую функциональность для JS.

Сохранение ссылки на это:

render: function() { 
    var results = this.props.data, 
     that = this; 
    return (
     <div className="row"> 
     {results.map(function(result) { 
      return(
       <a className="th medium-3 columns" href="#" onClick={that.getComponent.bind(that, 1)}> 
        <img alt="Embedded Image" key={result.id} src={"data:" + result.type + ";" + "base64," + result.image} /> 
       </a> 
      ) 
     })} 
     </div> 
    ); 
    } 
}); 

Answer 2

Вы можете использовать функции стрелок ES6 автоматически сохранить этот контекст:

результаты ((результат) => { ... })

или просто передать this вторых пары к map: Ресулу

ts (функция (результат) { ... }, это)