React：如何在庫中的組件上添加道具？

Question

所以我正在使用其他人通過以下方式編寫的名為react-search的組件...

  <div>
    <Search items={ITEMS} />
  </div>

這將在<div>內的<div>內創建<input> <div> 。 我需要將道具onKeyDown={ this.myMethod }到<input> 。 實現此目標的最佳方法是什么？ 我覺得在node_modules中編輯代碼不是答案。 謝謝！

Answer 1

除非圖書館專門提供一種將道具傳遞到其子組件的子項的方法，否則沒有其他方法可以做到。 React組件在設計上有點“不透明”，因此您無法對其內部狀態和子項感到困惑。 因此，在這種情況下， 你實際上必須編輯庫的代碼，以適應這一點。

但是，這並不是一件令人生畏的事情。 只需將您的事件處理程序作為道具傳遞給庫的組件，然后在庫中查找呈現<input>元素的位置，並照常為其提供事件處理程序。 我不得不以類似的方式來編輯許多React庫，這完全沒問題。

編輯：實際上我應該補充一點，您可以繞過React並使用純JavaScript將事件處理程序直接添加到input元素中。 例如，在庫組件的父級的componentDidMount和componentWillUnmount函數中，您將使用addEventListener或類似方法分別添加和刪除事件處理程序。 但是，如果您可以在React內完成更多工作的話，將React自身功能的變通辦法集中在一起通常是一個壞主意。 確切地確定要將偵聽器添加到哪個input元素也可能非常困難。

Answer 2

該庫僅接受onKeyChange 。 如果需要onKeyDown事件，則必須自己編輯庫或將PR發送到代碼庫 。