React 中如何正确实现动态星标渲染（替代无效的 onLoad 事件）-js教程-PHP中文网

React 中如何正确实现动态星标渲染（替代无效的 onLoad 事件）

在 React 中，onLoad 无法直接用于普通 HTML 元素（如），它仅对、、等支持加载事件的元素生效；本文提供基于 JSX 动态类名的优雅解决方案，并附带关键原理说明与最佳实践。

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

`），它仅对 ``、``、`<script>` 等支持加载事件的元素生效；本文提供基于 jsx 动态类名的优雅解决方案，并附带关键原理说明与最佳实践。</script>

React 的 onLoad 事件并非通用 DOM 加载钩子，而是专为可触发 load 浏览器原生事件的元素设计（如图片、脚本、iframe）。你代码中将 onLoad 绑定在

标签上——该元素永远不会触发 load 事件，因此 setStars() 函数根本不会执行，这是根本性误用。

更本质的问题在于：你试图在组件挂载后“手动操作 DOM”（通过 ref + classList.add）来控制星标状态。这不仅违背 React 的声明式理念，还易引发竞态问题（如 stars.current 在 useRef 初始化时可能为 null，且 children 访问依赖 DOM 渲染时机），同时丧失服务端渲染（SSR）兼容性与可预测性。

✅ 正确做法是完全放弃 onLoad 和 DOM 操作，改用纯声明式渲染：

Ink — React for interactive command-line apps.

Ink — 用 React 开发交互式命令行应用，使用 React组件构建丰富的终端 UI。

下载

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 priority :></span>
        ))}
      </p>
      <button onclick="{()"> window.open(productUrl)}>
        Visit site
      </button>
    </div>
  );
}

? 关键改进说明：