如何手动调度React Synthetic Events？

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!'});
});

因此，您的反应组件将接收文本属性，您可以在那里进行文本更改。这只是一个简单而粗略的示例，展示了您可以做什么。