PrimeReact Tooltip动态新增元素不生效问题求助

问题本质是PrimeReact的Tooltip组件只会在初始渲染时绑定目标元素的事件，动态新增的同类别元素不会自动绑定。官方提供的updateTargetEvents方法可以重新绑定事件，具体实现步骤如下：

1. 获取Tooltip组件实例
   使用React的useRef钩子创建一个引用，绑定到Tooltip组件上，以此调用组件内部的方法。

2. 在动态元素添加完成后更新事件绑定
   当你通过UI操作新增元素后（比如点击按钮添加、接口请求渲染完成），调用实例的updateTargetEvents()方法，让Tooltip重新识别所有符合选择器的元素。

修改后的代码示例：

import { useRef, useEffect } from 'react';
import { Tooltip } from 'primereact/tooltip';

const YourComponent = (props) => {
    const tooltipRef = useRef(null);
    // 假设这是存储动态元素的状态
    const [dynamicImages, setDynamicImages] = useState([]);

    // 示例：点击按钮新增元素的逻辑
    const addNewImage = () => {
        const newImage = {
            id: Date.now(),
            src: '你的图片地址'
        };
        setDynamicImages(prev => [...prev, newImage]);
    };

    // 监听动态元素状态变化，更新Tooltip绑定
    useEffect(() => {
        if (tooltipRef.current) {
            tooltipRef.current.updateTargetEvents();
        }
    }, [dynamicImages]);

    return (
        <>
            <button onClick={addNewImage}>新增图片</button>

            <Tooltip 
                ref={tooltipRef}
                id="tooltipImage" 
                target=".open-in-tooltip-added-image" 
                autoHide={false} 
                showDelay={0} 
                position={'right'}
            >
                <img 
                    src={require(`../img/${props.tooltipImage}`).default}
                    className="open-in-tooltip-added-image"
                    data-pr-tooltip="PrimeReact-Logo" 
                    height="500px" 
                />
            </Tooltip>

            {/* 动态渲染的元素，必须带有指定类名 */}
            {dynamicImages.map(img => (
                <img 
                    key={img.id}
                    src={img.src}
                    className="open-in-tooltip-added-image"
                    data-pr-tooltip="动态元素提示" 
                    height="500px" 
                />
            ))}
        </>
    );
};

export default YourComponent;

关键说明 #

• 动态新增的元素必须带有target属性指定的类名（示例中为.open-in-tooltip-added-image）
• 若为状态驱动的动态渲染，用useEffect监听状态变量变化，确保DOM更新完成后再调用updateTargetEvents
• 调用方法前检查ref是否存在，避免空指针报错

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