React组件中onLoad事件未触发传入函数的问题求助

核心问题1：<p>标签不支持onLoad事件 #

onLoad事件仅对图片、脚本、iframe等资源类元素生效，普通<p>元素不会触发这个事件，所以你的setStars函数根本没机会执行。

核心问题2：直接调用setStars()导致无限重渲染 #

如果在JSX里写onLoad={setStars()}，相当于组件每次渲染时都会立即执行setStars，DOM操作又会触发组件重新渲染，形成无限循环，这就是你看到报错的原因。

正确解决方案：使用useEffect钩子 #

利用React的useEffect钩子，在组件挂载完成或priority值变化时执行setStars函数，同时确保DOM操作的安全性。

修正后的完整代码：

import { useRef, useEffect } from 'react'; // 新增useEffect导入
import './ProductCard.css';
 
export default function ProductCard(props) {
    const stars = useRef();

    function setStars() {
        if (!stars.current) return; // 确保ref已绑定到DOM元素
        // 先清除之前的checked类，避免priority变化时残留样式
        Array.from(stars.current.children).forEach(star => star.classList.remove('checked'));
        for (let i = 0; i < props.product.priority; i++) { 
            stars.current.children[i].classList.add('checked');
        }
    }

    // 组件挂载或priority变化时执行setStars
    useEffect(() => {
        setStars();
    }, [props.product.priority]); // 依赖priority，值变化时重新执行

    return(
        <div>
            <div className="card">
                <h1>{props.product.productName}</h1>
                <p className="price">${props.product.price}</p>
                <p ref={stars} className="importance"> {/* 移除无效的onLoad */}
                    <span className="fa fa-star"></span>
                    <span className="fa fa-star"></span>
                    <span className="fa fa-star"></span>
                    <span className="fa fa-star"></span>
                    <span className="fa fa-star"></span>
                </p>
                <p><button onClick={() => window.open(props.product.productUrl)}>Visit site</button></p>
            </div>
        </div>
    )
}

关键说明 #

• useEffect的依赖数组[props.product.priority]确保只有当priority改变时才重新执行setStars，避免不必要的DOM操作。
• 新增清除之前checked类的逻辑，防止当priority值减小（比如从5变3）时，多余的星星还保留选中样式。
• 增加if (!stars.current)判断，避免组件挂载初期ref还未绑定DOM时执行DOM操作导致报错。

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