【React】学习React状态，制作星级评价！！

首先

这篇文章是初学者学习并留下作为输出的文章。我希望能对遇到同样问题的人有所帮助。由于之前已经在练习中用React创建了一些简单的应用程序，所以我选择了使用create-react-app快速创建并执行。

运行环境

• M1 Mac

 

node v16.15.0

目录

这次我希望能够快速进行操作确认，所以将下面的所有内容都直接放入src中。从这里开始，将其放入component目录中并且自己轻松使用。

create-react-app
    ├ node_modules
    ├ public
    └  src
       ├ Star.js
       ├ StarRating.js
       └ index.js

准备制作

首先，我們創建的部分是關於React手把手學習的第6章狀態管理。請使用create-react-app創建模板，接下來準備下方所示的星星圖標以供本次使用。這將是一個可以使用各種圖標的庫。

npm i react-icons

接下来，请按照目录结构创建Star.js和StarRating.js文件。

暂时尝试显示星星

首先，使用安装的图标来显示星级评分。请在之前创建的StarRating文件中添加以下内容：import { FaStar } from “react-icons/fa”。这部分代码是用于加载之前安装的库。

import React from "react";
import { FaStar } from "react-icons/fa";

export default function StarRating() {
  return [
    <FaStar color="red" />,
    <FaStar color="red" />,
    <FaStar color="red" />,
    <FaStar color="grey" />,
    <FaStar color="grey" />
  ];
}

如果你能够描述清楚，就在index.js文件中按照以下方式追加代码来引入StarRating文件。然后，请将root.render之后的App部分更改为StarRating。

import StarRating from './StarRating';

使用State来管理星球的状态

那么首先让这颗星球能够移动起来。

星级评分.js

import React, {useState} from "react";
import { Star } from "./Star";

export default function StarRating({ totalStars = 5 }) {
  const [selectedStars, setSelectedStars] = useState(0);
  return (
    <>
      {[...Array(totalStars)].map((n, i) => (
        <Star
          key={i}
          selected={selectedStars > i}
          onSelect={() => setSelectedStars(i + 1)}
        />
      ))}
      <p>
        {selectedStars} of {totalStars} stars
      </p>
    </>
  );
}

Star.js 星星.js

import { FaStar } from "react-icons/fa";
import React from "react";

export const Star = ({selected = false, onSelect = f => f }) => {
  return(
    <FaStar color={selected ? "red" : "grey"} onClick={onSelect} />
  )
};

如果你能把这些内容写在附带的文件中，那么初步的简易星级评价就完成了！接下来我们会详细看看都做了哪些事情！

StarRating文件说明

这个文件将成为本次的主要文件。下面的部分首先是state的定义。
selectedStars将成为一个变量，并且用这个变量来管理星星的状态。setSelectedStars将成为selectedStars的一个函数。命名可以自由选择，但基本上是在声明变量时加上”set”前缀。默认情况下，它被设定为0。

const [selectedStars, setSelectedStars] = useState(0);

然后，在以下部分中，totalStars=5是接收的参数，然后我们使用[…Array(totalStars)].map((n, i)来展开并生成与元素数量相同的星星。map函数是一个迭代函数，它会逐个提取内容并进行后续处理。
作为后续处理，我们会逐个将它们绘制为Star组件。selected={selectedStars > i}会判断i是否大于迭代处理的次数。
onSelect={() => setSelectedStars(i + 1)}会在被点击时加1。

{[...Array(totalStars)].map((n, i) => (
  <Star
    key={i}
    selected={selectedStars > i}
    onSelect={() => setSelectedStars(i + 1)}
  />
))}

星星文件的说明

在这个文件中，先前的selected和onSelect属性已被添加，并且onClick={onSelect}成为判断是否被点击的部分。这个StarRating组件接收props，并且当selected被接收时，默认值为false。然后由color={selected ? “red” : “grey”}进行判断。A ? “” ： “”是一个条件语句，当A为真时执行冒号左边的代码，否则执行冒号右边的代码。在这里我们用它来分岐颜色。

export const Star = ({selected = false, onSelect = f => f }) => (
  <FaStar color={selected ? "red" : "grey"} onClick={onSelect} />
);

请在这部分之后小心括号。我一直用{}进行操作，所以没返回结果，让我困惑了大约十分钟…哈哈

总之

感谢您观看直到最后。
由于我还是一个初学者，如果有什么不足之处，希望能够得到您的教诲。
我目前正在以下著作中学习，并将这次学习作为一篇文章进行输出。
如果您对以下链接感兴趣，请进行购买！

反应式实战学习第二版