React升级后JSX中JQuery toggle()方法失效问题求助

问题背景 #

项目从React 0.14.8升级到17.0.2，jQuery版本保持3.5.1不变。原代码通过jQuery的$('.popover-container').toggle()切换弹窗可见性，升级后该功能失效，inline样式display:block/none未被添加到目标元素上。

原实现代码：

const overlay = (
  <div className="type-selector">
    <button onClick={() => $('.popover-container').toggle()}>
      <img src={'someicon.png'} />
    </button>

    <div className="popover-container">
      <Button onClick={() => next('ONE')}>Option 1</Button>
      <br />
      <Button onClick={() => next('TWO')}>Option 2</Button>
      <br />
      <Button onClick={() => next('THREE')}>Option 3</Button>
    </div>
  </div>
);

ReactDOM.render(overlay, buttons[i]);

问题原因 #

React 17对虚拟DOM的渲染一致性做了严格优化。旧版本React中，直接用jQuery操作DOM的做法能勉强工作，但在17版本后，React的渲染流程会确保虚拟DOM和真实DOM同步——jQuery对真实DOM的修改会被React的重渲染操作覆盖，甚至可能因为虚拟DOM的更新，导致jQuery无法定位到正确的DOM节点，最终导致toggle()操作失效。

解决方案 #

方案1：用React状态管理（推荐）

完全遵循React的虚拟DOM机制，用组件状态控制弹窗的显示隐藏，这是React生态下的标准做法，彻底避免DOM冲突：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Overlay = () => {
  const [isPopoverVisible, setIsPopoverVisible] = useState(false);

  const togglePopover = () => {
    setIsPopoverVisible(prevState => !prevState);
  };

  return (
    <div className="type-selector">
      <button onClick={togglePopover}>
        <img src={'someicon.png'} />
      </button>

      <div 
        className="popover-container"
        style={{ display: isPopoverVisible ? 'block' : 'none' }}
      >
        <Button onClick={() => next('ONE')}>Option 1</Button>
        <br />
        <Button onClick={() => next('TWO')}>Option 2</Button>
        <br />
        <Button onClick={() => next('THREE')}>Option 3</Button>
      </div>
    </div>
  );
};

ReactDOM.render(<Overlay />, buttons[i]);

这种方式通过React状态驱动UI变化，所有DOM操作都由React管理，不会出现冲突问题，同时代码也更符合React的设计理念。

方案2：兼容jQuery的临时方案（不推荐）

如果暂时无法大规模重构代码，可以通过React的ref获取真实DOM元素后再用jQuery操作，避免类选择器定位错误：

import React, { createRef } from 'react';
import ReactDOM from 'react-dom';

const popoverRef = createRef();

const overlay = (
  <div className="type-selector">
    <button onClick={() => {
      if (popoverRef.current) {
        $(popoverRef.current).toggle();
      }
    }}>
      <img src={'someicon.png'} />
    </button>

    <div ref={popoverRef} className="popover-container">
      <Button onClick={() => next('ONE')}>Option 1</Button>
      <br />
      <Button onClick={() => next('TWO')}>Option 2</Button>
      <br />
      <Button onClick={() => next('THREE')}>Option 3</Button>
    </div>
  </div>
);

ReactDOM.render(overlay, buttons[i]);

注意：这种方案只是临时过渡手段，依然存在React重渲染覆盖jQuery修改的风险，长期来看还是建议迁移到纯React的状态管理方案。

内容的提问来源于stack exchange，提问作者David Gevorgyan