根据设备类型渲染不同组件的最佳实践（解决移动端交互冲突）

你提到的两种思路都可行，甚至可以更灵活地处理，下面分两种方案说明：

方案一：按设备类型渲染不同组件 #

通过检测设备类型（移动端/桌面端），分别渲染对应交互逻辑的按钮，同时将跳转功能放在模态框中（仅移动端显示跳转按钮）。

1. 先实现一个检测设备的Hook #

const useIsMobile = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkDevice = () => {
      // 可根据需求调整宽度阈值，或直接检测触摸支持
      setIsMobile(window.innerWidth < 768 || 'ontouchstart' in window);
    };

    checkDevice();
    window.addEventListener('resize', checkDevice);
    return () => window.removeEventListener('resize', checkDevice);
  }, []);

  return isMobile;
};

2. 在组件中使用该Hook #

const YourComponent = () => {
  const isMobile = useIsMobile();
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  const handleModalOpen = () => setModalIsOpen(true);
  const handleModalClose = () => setModalIsOpen(false);
  const handleNavigate = () => {
    // 跳转逻辑，比如 window.location.href = '/more-info'
  };

  // 光标位置监听逻辑
  useEffect(() => {
    const update = (e) => {
      setX(e.x || e.touches[0].clientX);
      setY(e.y || e.touches[0].clientY);
    };
    window.addEventListener("mousemove", update);
    window.addEventListener("touchmove", update);
    return () => {
      window.removeEventListener("mousemove", update);
      window.removeEventListener("touchmove", update);
    };
  }, [setX, setY]);

  return (
    <>
      {isMobile ? (
        // 移动端：点击打开模态框，不直接跳转
        <button 
          onClick={handleModalOpen} 
          className="info-button"
        >
          info
        </button>
      ) : (
        // 桌面端：hover打开模态框，点击直接跳转
        <button 
          onMouseEnter={handleModalOpen} 
          onMouseLeave={handleModalClose} 
          onClick={handleNavigate}
          className="info-button"
        >
          info
        </button>
      )}

      {modalIsOpen && (
        <div className="modal" style={{ left: `${x}px`, top: `${y}px` }}>
          {/* 模态框内容 */}
          <p>这里是提示信息</p>
          {/* 移动端显示跳转按钮，桌面端可选显示 */}
          {isMobile && (
            <button onClick={handleNavigate}>查看更多</button>
          )}
          <button onClick={handleModalClose}>关闭</button>
        </div>
      )}
    </>
  );
};

方案二：统一交互逻辑，跳转功能仅放在模态框中 #

这种方案不需要区分设备，无论桌面还是移动端，都通过hover/tap打开模态框，跳转功能统一放在模态框内的按钮上。好处是减少设备检测逻辑，交互更统一。

代码示例 #

const YourComponent = () => {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  const handleModalOpen = () => setModalIsOpen(true);
  const handleModalClose = () => setModalIsOpen(false);
  const handleNavigate = () => {
    // 跳转逻辑
  };

  useEffect(() => {
    const update = (e) => {
      setX(e.x || e.touches[0].clientX);
      setY(e.y || e.touches[0].clientY);
    };
    window.addEventListener("mousemove", update);
    window.addEventListener("touchmove", update);
    return () => {
      window.removeEventListener("mousemove", update);
      window.removeEventListener("touchmove", update);
    };
  }, [setX, setY]);

  return (
    <>
      <button 
        onMouseEnter={handleModalOpen} 
        onMouseLeave={handleModalClose}
        onClick={handleModalOpen} // 移动端点击打开模态框
        className="info-button"
      >
        info
      </button>

      {modalIsOpen && (
        <div className="modal" style={{ left: `${x}px`, top: `${y}px` }}>
          <p>这里是提示信息</p>
          {/* 所有设备都通过这个按钮跳转 */}
          <button onClick={handleNavigate}>查看更多</button>
          <button onClick={handleModalClose}>关闭</button>
        </div>
      )}
    </>
  );
};

额外注意点 #

• 移动端的click事件有300ms延迟，若要更流畅的体验，可改用touchend事件，但需添加防误触逻辑（比如判断触摸时长）。
• 模态框的关闭逻辑可补充：点击模态框外部自动关闭，或监听移动端返回键事件。

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