如何在 ReactJS 中创建评分组件？

在本指南中，我们将介绍如何在 ReactJS 中创建一个简单的评分组件。评分组件通常用于让用户根据他们的经验或满意度对某个项目或产品进行评价。

步骤 1: 创建评分组件的基础结构

我们将从创建基本结构开始。在这个例子中，我们将使用函数式组件来创建评分组件：

import React from 'react';

function Rating() {
  return (
  <div>
    {/*评分组件的组成部分*/}
  </div>
  );
}

export default Rating;

步骤 2: 添加评分组件的基本样式

接下来，我们将为评分组件添加样式。在这个例子中，我们将使用 Font Awesome 图标库中的星型图标。在组件中添加以下代码：

import { faStar } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';

function Rating() {
  return (
  <div>
    <FontAwesomeIcon icon={faStar} />
    <FontAwesomeIcon icon={faStar} />
    <FontAwesomeIcon icon={faStar} />
    <FontAwesomeIcon icon={faStar} />
    <FontAwesomeIcon icon={faStar} />
  </div>
  );
}

export default Rating;

此代码段将在页面上渲染五个星型图标。您可以使用 CSS 样式来调整这些图标的大小和颜色。

步骤 3:添加交互功能

接下来，我们将为评分组件添加一些交互功能，使评分组件能够响应用户的点击操作。

首先，我们需要为每个星型图标创建一个 onClick 事件处理程序。我们也需要在组件中使用 state 来跟踪用户的分数。

使用 useState 钩子初始化状态变量：

import { faStar } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useState } from 'react';

function Rating() {
  const [rating, setRating] = useState(0);

  return (
  <div>
    <FontAwesomeIcon icon={faStar} onClick={() => setRating(1)} />
    <FontAwesomeIcon icon={faStar} onClick={() => setRating(2)} />
    <FontAwesomeIcon icon={faStar} onClick={() => setRating(3)} />
    <FontAwesomeIcon icon={faStar} onClick={() => setRating(4)} />
    <FontAwesomeIcon icon={faStar} onClick={() => setRating(5)} />
  </div>
  );
}
export default Rating;

此代码段将在每个星型图标上添加一个 onClick 事件处理程序，当用户点击其中一个图标时，评分将设置为对应的分数（1 到 5）。

但是，如果用户已经为评分组件设置了分数，我们还需要设置渲染的图标。我们可以通过在星型图标中添加一个 className 来实现这一点。

import { faStar } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useState } from 'react';
import './Rating.css';

function Rating() {
  const [rating, setRating] = useState(0);

  return (
  <div>
    <FontAwesomeIcon icon={faStar} 
      onClick={() => setRating(1)}
       className={rating >= 1 ? 'active' : ''}
    />
    <FontAwesomeIcon icon={faStar} 
      onClick={() => setRating(2)}
       className={rating >= 2 ? 'active' : ''}
    />
    <FontAwesomeIcon icon={faStar} 
      onClick={() => setRating(3)}
       className={rating >= 3 ? 'active' : ''}
    />
    <FontAwesomeIcon icon={faStar} 
      onClick={() => setRating(4)}
       className={rating >= 4 ? 'active' : ''}
    />
    <FontAwesomeIcon icon={faStar} 
      onClick={() => setRating(5)}
       className={rating >= 5 ? 'active' : ''}
    />
  </div>
  );
}

export default Rating;

此代码段将在评分组件中添加一个“active”类，以突出显示用户选择的图标。

步骤 4: 处理动态评分

最后，我们将创建一个动态评分，以显示用户选择的评分。

我们可以使用 useEffect 钩子来监听评分状态的更改，并在更改时更新动态评分。使用 useEffect 钩子可以监测 rating 状态的变化，并实时更新界面显示结果。

import { faStar } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useState, useEffect } from 'react';
import './Rating.css';

function Rating() {
  const [rating, setRating] = useState(0);
  const [dynamicRating, setDynamicRating] = useState(0);

  useEffect(() => {
    setDynamicRating(rating);
  }, [rating]);

  return (
  <div>
    <FontAwesomeIcon icon={faStar} 
      onClick={() => setRating(1)}
      className={rating >= 1 ? 'active' : ''}
    />
    <FontAwesomeIcon icon={faStar} 
      onClick={() => setRating(2)}
      className={rating >= 2 ? 'active' : ''}
    />
    <FontAwesomeIcon icon={faStar} 
      onClick={() => setRating(3)}
      className={rating >= 3 ? 'active' : ''}
    />
    <FontAwesomeIcon icon={faStar} 
      onClick={() => setRating(4)}
      className={rating >= 4 ? 'active' : ''}
    />
    <FontAwesomeIcon icon={faStar} 
      onClick={() => setRating(5)}
      className={rating >= 5 ? 'active' : ''}
    />
    <p>您当前的评分： {dynamicRating} 星</p>
  </div>
  );
}
export default Rating;

这段代码中，我们创建了一个名为 dynamicRating 的新状态变量，用于存储动态评分。使用 useEffect 钩子来监听评分状态的更改，并在更改时更新动态评分。最终，我们在组件中添加一个小段并更新动态评分。

总结

在本指南中，我们介绍了如何在 ReactJS 中创建一个评分组件。我们从创建基本结构开始，然后添加了样式、交互功能和动态评分。此评分组件可以帮助用户更直观地了解其他用户对某个项目或产品的评价，也可以更直接的收集用户反馈。