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

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

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

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

`），它仅对 ``、``、`<script>` 等支持加载事件的元素生效；正确做法是利用 jsx 表达式动态计算类名，在渲染时一次性生成带 `checked` 类的星标结构。</script>

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

元素不触发 onLoad 事件（该事件不属于其标准事件列表）；
使用 ref.current.children 属于命令式 DOM 操作，违背 React 数据驱动理念，且在服务端渲染或严格模式下易出错；
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 priority :></span>
          ))}
        </p>
        <p>
          <button onclick="{()"> window.open(productUrl)}>
            Visit site
          </button>
        </p>
      </div>
    </div>
  );
}

? 关键说明：