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发送到代码库 。