React 的 onLoad 事件仅适用于 、、 等支持加载生命周期的原生 HTML 元素，而 标签不触发 onLoad，因此直接绑定无效；应改用声明式方式（如动态 className）在渲染时精准控制 DOM 状态。

react 的 `onload` 事件仅适用于 ``、`

在 React 开发中，一个常见误区是试图为非加载型元素（如

、

、）绑定 onLoad 事件——这本质上是无效的，因为这些元素没有浏览器定义的 load 事件。你代码中的

正是如此：onLoad 不会被触发，setStars() 永远不会执行，且 ref.current.children[i] 在首次渲染时尚未挂载，还可能引发 Cannot read property 'children' of null 错误。

✅ 正确做法是：放弃命令式操作（useRef + onLoad），转而采用 React 推荐的声明式渲染模式——即根据 props.product.priority 直接计算每个星标的类名，在 JSX 中一次性生成带状态的 DOM。

以下为优化后的实现：

shopify-app-react-router

构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G

下载

import './ProductCard.css';

export default function ProductCard(props) {
  const priority = props.product.priority;

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

? 关键改进说明：

• 移除无意义的 useRef 和 onLoad：避免副作用与时机错误，提升可预测性；
• 使用 Array.from() 动态生成 5 颗星：清晰表达「固定数量 + 条件渲染」逻辑；
• 内联条件类名：className={fa fa-star ${i
• 必需添加 key：React 列表渲染要求每个子元素有唯一 key；此处索引 i 可接受，因星标顺序固定、数量恒为 5（若未来需支持动态星数，建议用更稳定的标识符）；
• 零副作用、纯函数组件：无需 useEffect 或 useRef，渲染即同步、可测试、易维护。

⚠️ 注意事项：

• 若 priority 可能为 undefined 或非数字，建议增加安全处理：const priority = Math.max(0, Math.min(5, Number(props.product.priority) || 0))；
• 图标字体（如 Font Awesome）需确保 CSS 已全局引入，否则 fa fa-star 类将不生效；
• window.open() 在部分移动端或弹窗拦截环境下可能失败，生产环境建议配合 target="_blank" + rel="noopener" 使用 标签替代按钮。

总结：React 的核心哲学是“状态驱动 UI”，而非“操作 DOM”。当发现 onLoad、useEffect 或 ref 被用于简单状态映射时，往往是设计偏离了声明式范式——回归 props → JSX 的直连逻辑，通常就是最健壮、最 React-native 的解法。