Каков синтаксис для событий щелчка в React Hooks для передачи аргументов

Question

Это всегда отлично работало для меня в компонентах класса React:

let myValue: string = "Hello World";
<Button onClick={this.handleClick.bind(this, myValue)}></Button>

Я нашел этот синтаксис в документации по React Hooks, и мне он нравится, но он не всегда возвращает значение:

<Button onClick={handleClick} value={myValue}></Button>

Этот синтаксис работает, но его сложно набрать и он выглядит беспорядочно:

<Button onClick={() => handleClick(myValue)}></Button>

Это еще один способ, который работает с перехватчиками, но мне кажется хакерским.

  <Button onClick={handleClick.bind(null, myValue)}></Button>

Меня смущает слишком много вариантов.Есть ли не просто лучший способ сделать это?

Answer 1

Это совершенно подходящий способ сделать это:

<Button onClick={() => handleClick(myValue)}></Button>

Единственным недостатком является то, что onClick prop имеет новое значение при каждом рендеринге и запускает повторный рендеринг дочернего компонента - даже если он чистый,Это может или не может вызвать проблемы производительности в зависимости от конкретного компонента;это будет проблемой, если имеется много Button экземпляров или их повторное рендеринг дорогой.

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

// outside function component
const myValue = "Hello World";
const myHandleClick = () => handleClick(myValue);
...
// inside function component
<Button onClick={myHandleClick}></Button>

Если значение является динамическим и доступно только внутри компонента, функция может быть определена внутри компонента и запомнена с помощью ловушки useMemo или useCallback (как уже упоминалось в другом ответе):

// inside function component
const myHandleClick = useCallback(() => handleClick(myValue), [myValue]);
...
<Button onClick={myHandleClick}></Button>

Answer 2

Первая и последняя версии в вашем вопросе создают новую функцию, так что, если вам не безразлично просто передать функцию handleClick опоре, вы должны это сделать.

Если вам нужнопередавая аргументы функции, вы все равно можете использовать свою первую версию в компонентах функции, но поскольку this не используется, вы можете просто установить ее на null.

<Button onClick={handleClick.bind(null, myValue)}></Button>