React 30 秒速学：制作星级评分组件，轻松搞定用户交互！

2024-01-06 18:11:39

前言
在许多网站或应用程序中，星级评分是一种常用的交互元素，它允许用户对产品或服务进行评级。本教程将向你展示如何使用 React 来制作一个简单的星级评分组件，只需 30 秒，你就可以轻松掌握！

1. 创建星星组件

首先，我们需要创建一个星星组件，它将负责显示单个星星的外观。在 React 中，你可以通过创建函数组件来实现。

const Star = ({ active }) => {
  return (
    <span className={active ? 'star active' : 'star'}>★</span>
  );
};

在上面的代码中，Star 函数组件接受一个 active 参数，它决定了星星是否应该被激活。如果 active 为 true，星星将被激活，否则它将被禁用。

2. 创建星级评分组件

接下来，我们需要创建一个星级评分组件，它将包含多个星星组件，并根据父组件的状态为每个星星呈现适当的外观。

const Rating = ({ rating }) => {
  const stars = [];
  for (let i = 1; i <= 5; i++) {
    stars.push(<Star key={i} active={i <= rating} />);
  }

  return (
    <div className="rating">
      {stars}
    </div>
  );
};

在上面的代码中，Rating 函数组件接受一个 rating 参数，它决定了星级评分组件的初始评级。组件内部有一个 for 循环，它将创建 5 个星星组件，每个星星组件的 active 属性都取决于 i 和 rating 的值。最后，这些星星组件会被渲染到一个 div 容器中，即星级评分组件。

3. 使用星级评分组件

现在，你已经创建了星星组件和星级评分组件，就可以在 React 应用程序中使用它们了。以下是一个示例代码：

import Rating from './Rating';

const App = () => {
  const [rating, setRating] = useState(3);

  return (
    <div>
      <Rating rating={rating} />
      <button onClick={() => setRating(rating + 1)}>+</button>
      <button onClick={() => setRating(rating - 1)}>-</button>
    </div>
  );
};