在 React 中，onLoad 无法直接用于普通 HTML 元素（如 <p>），它仅对 <img>、<iframe>、<script> 等支持加载事件的元素生效；本文提供基于 JSX 动态类名的优雅解决方案，并附带关键原理说明与最佳实践。
在 react 中，`onload` 无法直接用于普通 html 元素（如 `
`），它仅对 ``、`
React 的 onLoad 事件并非通用 DOM 加载钩子，而是专为可触发 load 浏览器原生事件的元素设计（如图片、脚本、iframe）。你代码中将 onLoad 绑定在 <p> 标签上——该元素永远不会触发 load 事件，因此 setStars() 函数根本不会执行，这是根本性误用。
更本质的问题在于：你试图在组件挂载后“手动操作 DOM”（通过 ref + classList.add）来控制星标状态。这不仅违背 React 的声明式理念，还易引发竞态问题（如 stars.current 在 useRef 初始化时可能为 null，且 children 访问依赖 DOM 渲染时机），同时丧失服务端渲染（SSR）兼容性与可预测性。
✅ 正确做法是完全放弃 onLoad 和 DOM 操作，改用纯声明式渲染：
import './ProductCard.css';
export default function ProductCard({ product }) {
const { productName, price, priority, productUrl } = product;
return (
<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>
<button onClick={() => window.open(productUrl)}>
Visit site
</button>
</div>
);
}? 关键改进说明：
- 动态类名生成：使用模板字符串 ${i < priority ? 'checked' : ''} 实现条件样式，React 会在每次 priority 变化时自动重渲染对应星标；
- 避免 ref 与副作用：无需 useRef 或 useEffect，所有逻辑内联于 JSX，简洁、可测试、无生命周期风险；
- 必需 key 属性：Array.from() 生成的列表必须为每个 <span> 提供唯一 key（此处用索引 i 合理，因星标顺序固定且数量恒为 5）；
- 语义化优化：将 <p><button>...</button></p> 简化为直接 <button>，避免无意义嵌套。
⚠️ 注意事项：
- 若 priority 可能超出 [0, 5] 范围，建议增加边界保护：Math.min(Math.max(0, priority), 5)；
- fa-star 类需确保已引入 Font Awesome CSS（或使用 SVG 图标替代，更可控）；
- window.open() 在某些浏览器中可能被弹窗拦截，生产环境建议改用 <a href={productUrl} target="_blank" rel="noopener">。
总结：React 的核心优势在于状态驱动 UI。当需要响应数据变化更新视图时，应优先通过 props/state + 条件渲染实现，而非模拟原生 DOM 事件或手动操作 DOM。这不仅是代码健壮性的保障，更是拥抱 React 生态的最佳实践。
