React：如何在库中的组件中添加道具？

Question

所以我以下列方式使用名为react-search的组件someone else wrote ...

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

这会在<input>内的<div>内创建<div>。我需要将道具onKeyDown={ this.myMethod }添加到<input>。实现这一目标的最佳方法是什么？我觉得编辑node_modules中的代码不是答案。谢谢！

Answer 1

除非图书馆专门提供了将道具传递到其组件的方法。孩子们，没有其他办法可以做到。反应组件有点不透明＆＃34;通过设计使您无法满足其内部状态和孩子的需求。因此，在这种情况下，您实际上做必须编辑库的代码以适应这种情况。

然而，这并不是一件令人生畏的事情。只需将您的事件处理程序作为prop传递给库的组件，然后在库中查找正在呈现<input>元素的位置，并像往常一样为其提供事件处理程序。我必须以类似的方式编辑许多React库，并且完全没问题。

编辑：实际上我应该补充一点，您可以绕过React并使用纯JavaScript直接向input元素添加事件处理程序。例如，在库组件的父{h} componentDidMount和componentWillUnmount函数中，您将分别使用addEventListener或类似函数添加和删除事件处理程序。然而，当您可以在React内部执行相同的工作时，它通常会将解决方法与React的自身功能混合在一起是一个坏主意。确切地确定要添加侦听器的input元素可能相当困难。

Answer 2

图书馆only accepts the onKeyChange prop。如果您想要onKeyDown事件，则必须自己编辑库或send in a PR to the code base。