如何将React Hook绑定到jQuery动态创建的元素？

核心问题分析 #

1. 动态DOM元素绑定失效：jQuery动态生成的<i id="like">元素，在你调用绑定函数时可能还未被创建，直接通过id查询绑定事件自然无效。
2. Hook调用规则限制：useQuery是React Hook，必须在React组件/自定义Hook的顶层调用，不能直接放到普通的点击事件回调函数中，这违反了React Hook的使用规则。

可行实现步骤 #

1. 用事件委托绑定点击事件

放弃直接查询动态元素绑定事件，改为事件委托——将点击事件绑定到一个始终存在的父容器（比如document或固定的DOM容器），通过事件冒泡捕获点赞按钮的点击行为。

2. 在React组件内封装GraphQL操作

将GraphQL查询/变更逻辑放到React组件中，通过useRef保存可被外部调用的操作函数，避免在非React环境中直接调用Hook。

代码示例 #

React集成组件

import { useMutation, useQueryClient } from '@apollo/client';
import { useEffect, useRef } from 'react';
// 替换成你的GraphQL查询/变更语句
import { LIKE_MUTATION, ME_QUERY } from './graphql/queries';

function LikeButtonIntegration() {
  const queryClient = useQueryClient();
  // 初始化点赞变更操作
  const [triggerLike] = useMutation(LIKE_MUTATION, {
    onCompleted: () => {
      // 点赞完成后重新拉取用户数据，更新页面状态
      queryClient.refetchQueries({ query: ME_QUERY });
    },
    onError: (error) => {
      console.error('点赞失败:', error);
    }
  });

  // 用ref保存点赞操作函数，供外部事件回调调用
  const likeHandlerRef = useRef();
  likeHandlerRef.current = () => {
    // 如果需要传递参数（比如点赞目标ID），可以从点击元素上获取
    // const targetId = e.target.dataset.id;
    triggerLike({ 
      variables: { 
        // 这里传入你的变量，比如目标ID
        // targetId: targetId
      } 
    });
  };

  useEffect(() => {
    // 事件委托：监听document上的点击事件
    const handleDocumentClick = (e) => {
      // 判断点击的元素是否是点赞按钮（支持点击按钮内部子元素的情况）
      const likeBtn = e.target.closest('#like');
      if (likeBtn) {
        e.preventDefault();
        // 调用保存的点赞函数
        likeHandlerRef.current?.();
      }
    };

    // 绑定事件
    document.addEventListener('click', handleDocumentClick);

    // 组件卸载时清理事件监听
    return () => {
      document.removeEventListener('click', handleDocumentClick);
    };
  }, []);

  // 该组件仅用于集成功能，无需渲染DOM
  return null;
}

export default LikeButtonIntegration;

在React应用中引入集成组件

在你的根组件或合适的位置渲染这个集成组件，确保它能获取到Apollo Client的上下文：

import LikeButtonIntegration from './LikeButtonIntegration';

function App() {
  return (
    <div>
      {/* 你的其他React组件 */}
      <LikeButtonIntegration />
      {/* jQuery动态生成内容的容器 */}
      <div id="jquery-generated-content"></div>
    </div>
  );
}

额外注意事项 #

• 如果页面中有多个点赞按钮，不要用唯一的id，改用class（比如class="like-btn"），然后在事件判断中改为e.target.closest('.like-btn')，并通过data-*属性传递每个按钮的唯一标识（比如<i class="like-btn" data-post-id="123">）。
• 确保你的React应用已经正确配置了Apollo Client，组件能访问到Apollo的上下文（比如包裹在ApolloProvider中）。

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