在 React 中，onLoad 无法直接用于普通 HTML 元素（如 <p>），它仅对 <img>、<iframe>、<script> 等支持加载事件的元素生效；正确做法是利用 JSX 表达式动态计算类名，在渲染时一次性生成带 checked 类的星标结构。

在 react 中，`onload` 无法直接用于普通 html 元素（如 `

`），它仅对 ``、`

React 的核心原则之一是“声明式渲染”——你应描述 UI “应该是什么样”，而非手动操作 DOM（如在 onLoad 中遍历子节点并添加 class）。你原代码中尝试用 onLoad 触发 setStars() 并通过 ref 操作 children[i]，存在三重问题：

1. <p> 元素不触发 onLoad 事件（该事件不属于其标准事件列表）；
2. 使用 ref.current.children 属于命令式 DOM 操作，违背 React 数据驱动理念，且在服务端渲染或严格模式下易出错；
3. stars.current.children[i] 在组件首次渲染时可能尚未挂载，导致 undefined 错误（即你截图中的报错）。

✅ 正确解法：在 JSX 中直接计算每个星标的类名。以下为优化后的实现：

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

import './ProductCard.css';

export default function ProductCard(props) {
  const { productName, price, priority, productUrl } = props.product;

  return (
    <div>
      <div className="card">
        <h1>{productName}</h1>
        <p className="price">${price}</p>
        <p className="importance">
          {Array.from({ length: 5 }, (_, i) => (
            <span
              key={i}
              className={`fa fa-star ${i < priority ? 'checked' : ''}`}
            />
          ))}
        </p>
        <p>
          <button onClick={() => window.open(productUrl)}>
            Visit site
          </button>
        </p>
      </div>
    </div>
  );
}

? 关键说明：

• Array.from({ length: 5 }, (_, i) => ...) 创建一个长度为 5 的数组，并为每个索引 i 渲染一个 <span>；
• className={fa fa-star ${i < priority ? 'checked' : ''}} 利用模板字符串 + 三元运算符，动态决定是否添加 'checked' 类；
• key={i} 是 React 列表渲染必需的唯一标识（此处因星标无业务 ID，使用索引可接受，但需确保顺序稳定）；
• 移除了 useRef 和 onLoad，完全交由 React 控制渲染逻辑，更可靠、更易测试、更符合 Hooks 设计范式。

⚠️ 注意事项：

• 若 priority 可能超出 [0, 5] 范围，建议先做安全截断：Math.max(0, Math.min(5, priority))；
• 避免在 onClick 中直接调用 window.open()，推荐使用 <a href={productUrl} target="_blank" rel="noopener"> 实现语义化链接，兼顾可访问性与安全性；
• 如需交互式评分（用户点击打分），应结合 useState 管理状态，并为每个星标绑定 onClick 事件。

此方案简洁、健壮、符合 React 最佳实践，彻底规避了无效事件监听与潜在 DOM 操作风险。