Блог

Это всегда отлично работало для меня в компонентах класса 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>
  

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

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

 <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>
  

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

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

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