Question

我正在努力将React组件添加到包含大量遗留代码的现有项目中。

我遇到的一个问题是React将其处理程序附加到document对象上的事件委托。对我来说不幸的是，我们的许多遗留代码拦截了点击事件并在它们进入文档对象之前调用event.stopPropagation（例如，处理在您点击它们之外时关闭的工具下拉和模态）。

当拦截click事件时，事件不会传播到React的文档级事件处理程序，并且事件不会委托给我的React组件（即使组件的实际DOM元素位于拦截之上DOM中的元素并首先接收实际的非委托事件。

所以......问题：有没有办法在没有命中React的文档级事件处理程序的情况下手动触发给定事件的React合成事件？或者有没有办法在其他地方移动或复制单个事件处理程序？

作为后备，我正在考虑在React组件安装后使用jQuery添加事件，但如果可能，我宁愿不这样做。

Answer 1

取决于你在做什么，反应中的事件应该对组件的内部状态或类似事件产生变化（如果你使用类似通量的架构，可能会改变全局状态）。因此，考虑到这一点，您可以创建一个包装器，渲染组件，并使用您想要的内容触发该包装器。

例如：

function renderComponent(props={}) { 
  ReactDOM.render(<Component {...props} />, document.getElementById('elementId'));
}

假设您有一个按钮，在点击后，应该对反应组件的文本进行更改。

$('button#my-button').on('click', function(event){
  event.preventDefault();
  renderComponent({text: 'Hello world!'});
});

因此，您的react组件将接收text属性，您可以在那里进行文本更改。这只是你可以做的一个快速而又肮脏的例子。