Самый оптимальный вариант это в Component
добавить собственный обработчик событий, где уже передавать нужные данные в callback
из props
class Component extends React.Component {
constructor() {
super()
this.handleClick = this.handleClick.bind()
}
render() {
<div onClick={this.handleClick} />
}
handleClick() {
const {id} = this.props
// передаем необходимые данные
this.props.onClick(id)
}
}
class ParentComponent extends React.Component {
constructor() {
super()
this.handleClick = this.handleClick.bind()
}
render() {
const {elements} = this.props
return (
<div>
{elements.map(el =>
<Component onClick={this.handleClick} id={el.id} />
)}
</div>
)
}
handleClick(id) {
// принимаем от дочернего компонента id
}
}
Можно еще создать HOC
, который будет отлавливать клик, и обрабатывать его. (Хотя тут есть свои минусы)
Гист
class ClickableComponent extends React.Component {
constructor() {
super()
this.handleClick = this.handleClick.bind(this)
}
render() {
return (
<div onClick={this.handleClick}>
{this.props.children}
</div>
)
}
handleClick(e) {
const {onClick, ...others} = this.props
onClick(others, e)
}
}