Обработка щелчков в динамически сгенерированных элементах

Question

Я заметил этот образец пару раз и начал задаваться вопросом, что на самом деле является правильным способом справиться с этим.

Предположим, у меня есть массив объектов, для которого мне нужно сгенерировать соответствующие элементы, которые можно щелкнуть. В обработчике кликов я хочу получить доступ к соответствующему объекту.

render() { 
    links = this.props.links.map(link => { 
    <a 
     onClick={this.clickHandle}> 
     {link.title} 
    </a> 
    }) 
    // ... 
} 

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

onClick={this.clickHandle(link)} 
// ... 
clickHandle(link) { 
    return() => { 
    alert(link) 
    } 
} 

Хотя это работает, как и ожидалось, мне интересно, если это на самом деле правильный способ сделать это , Кажется, я создаю много промежуточных функций каждый раз, когда React восстанавливает этот кусок dom. Это плохая практика? Какие альтернативы?

Answer 1

Какие альтернативы?

Создать компонент ссылки, который получает данные в качестве реквизита и передает его в обработчик щелчка:

var Link = React.createClass({ 
    propTypes: { 
     data: ..., 
     onClick: React.PropTypes.func.isRequired, 
    }, 

    _onClick: function() { 
     this.props.onClick(this.props.data); 
    }, 

    render: function() { 
     return (
      <a 
       onClick={this._onClick}> 
       {this.pops.data.title} 
      </a> 
     ); 
    } 
}); 

Использование:

links = this.props.links.map(
    link => <Link key={...} data={link} onClick={this.clickHandle} /> 
); 

Answer 2

Несмотря на то, что он все еще создает промежуточные функции, React way должен использовать .bind().

render() { 
    links = this.props.links.map(link => { 
    <a 
     onClick={this.clickHandle.bind(this, link}> 
     {link.title} 
    </a> 
    }) 
    // ... 
}