React 的 onLoad 事件仅适用于支持该原生事件的元素（如 <img>、<iframe>、<script> 等），而 <p> 标签不支持 onLoad，因此绑定后不会触发；应改用声明式渲染逻辑，在 JSX 中直接根据 props.product.priority 动态生成带 checked 类的星标元素。
react 的 `onload` 事件仅适用于支持该原生事件的元素（如 ``、`
在 React 开发中，一个常见误区是误将原生 DOM 事件（如 onLoad）直接绑定到不支持该事件的 HTML 元素上。正如示例代码所示，开发者试图在 <p> 标签上使用 onLoad={setStars} 来初始化星标状态，但 <p> 并无 load 事件——该事件仅在资源加载完成时触发（如图片加载完毕），而普通块级元素不存在此类生命周期行为，因此回调函数永远不会执行。
✅ 正确做法是：放弃命令式操作（ref + 手动 DOM 操作），采用 React 推荐的声明式模式——即在渲染阶段直接计算并输出所需结构。
以下为优化后的实现：
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>
);
}? 关键改进说明：
- 移除 useRef 和 onLoad：避免无效事件绑定与潜在的 DOM 操作竞态问题；
- 使用 Array.from() 动态生成星标：创建 5 个 <span> 元素，每个根据索引 i 与 priority 比较决定是否添加 'checked' 类；
- 必须提供 key 属性：React 列表渲染要求每个子元素具备唯一 key；此处使用索引是可接受的（因星标顺序固定且无增删逻辑），但若未来需支持交互排序或动态增减，请改用稳定 ID；
- 类名拼接使用模板字符串：className={fa fa-star ${i < priority ? 'checked' : ''}} 简洁表达条件样式，语义清晰且性能高效；
- 解构 props 提升可读性：提前解构 props.product 中字段，使 JSX 更简洁易维护。
⚠️ 注意事项：
- 不要滥用 ref 进行初始 DOM 操作——这违背 React 数据驱动思想，易引发副作用和调试困难；
- 避免在 onLoad、onError 等非标准事件上做假设，查阅 MDN HTML 元素事件参考 确认支持情况；
- 若需在组件挂载后执行副作用（如动画初始化、第三方库集成），应使用 useEffect(() => { ... }, []) 替代 onLoad。
通过声明式渲染，代码更健壮、可测试性强，也完全契合 React 的设计理念：状态决定视图，而非视图反向操控状态。
