RxJS调用fromEvent时报Element|null无法分配给JQueryStyleEventEmitter错误如何解决

错误原因 #

• 选择器语法错误：document.querySelector("incBtn") 用于选中id为incBtn的元素时，必须补充id选择器前缀#，你的写法永远无法命中目标元素，返回值为null。
• 执行时机错误：React组件函数体的执行时机早于DOM挂载到页面的时机，哪怕选择器语法正确，此时调用querySelector也无法拿到未渲染的DOM元素，返回值依旧是null，这才是类型报错的核心根源——fromEvent不接受null作为事件源参数。
• 类型转换逻辑错误：fromEvent原生支持标准HTMLElement作为事件源，不需要强行转换为JQueryStyleEventEmitter类型，冗余的类型转换反而会引入额外的类型问题。

正确实现方案 #

在React中操作DOM优先使用useRef获取元素引用，配合useEffect在DOM挂载完成后再绑定RxJS事件：

import { Fragment, useState, useRef, useEffect } from "react";
import { fromEvent } from "rxjs";

const SimpleCounter = () => {
  const [result, setResult] = useState(0);
  // 用useRef绑定按钮元素
  const incrementButtonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    // 组件挂载后ref才会指向真实DOM，排除null情况
    if (!incrementButtonRef.current) return;
    // 直接传入DOM元素创建observable
    const increaseCount = fromEvent(incrementButtonRef.current, "click");
    // 订阅事件更新计数
    const subscription = increaseCount.subscribe(() => {
      setResult(prev => prev + 1);
    });
    // 组件卸载时取消订阅，避免内存泄漏
    return () => subscription.unsubscribe();
  }, []);

  return (
    <Fragment>
      <h1>{result}</h1>
      {/* 把ref绑定到button元素上 */}
      <button ref={incrementButtonRef} id="incBtn">Increase</button>
    </Fragment>
  );
};

如果你一定要用querySelector的写法，也必须把查询逻辑放到useEffect中，保证DOM已经渲染：

useEffect(() => {
  const incrementButton = document.querySelector<HTMLButtonElement>("#incBtn");
  if (!incrementButton) return;
  const increaseCount = fromEvent(incrementButton, "click");
  // 后续订阅逻辑同上
}, []);

内容的提问来源于stack exchange，提问作者Asfath Ahamed