2

Есть примерно такой кусочек кода:

...
  elements.map(el => <Component onClick={(event) => handleClick(el.id)} />)
...

Если я правильно понимаю, то он не очень оптимален. Т.к. стрелочная функция при рендере будет создаваться заново каждый раз. Если какие-то варианты по улучшению кода? Придумал вариант сделать бинд:

(event) => handleClick.bind(this, el.id)

Но не знаю на сколько этот вариант лучше. Какой вариант лучше или есть какой-то другой?

1 ответ 1

1

Самый оптимальный вариант это в 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)
  }
}
2
  • Правильно я понимаю что Component в виде функции будет выглядеть примерно так: https://gist.github.com/egorAva/9c11e9441ff34c66c5c9e5628755ece3 И получается на каждый элемент даже самый маленький (например span с классом для иконки), нужно будет делать такую обертку ?
    – DarkSir
    18 мая 2017 в 9:04
  • 1
    @DarkSir, вы можете написать HOC, который будет вешать onclick на дочерние компоненты, и в нем передавать props, которые получил
    – ThisMan
    18 мая 2017 в 9:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.