时间戳

首页 > 解决方案 > 如何渲染图标列表，总是递增一个？

javascript - 如何渲染图标列表，总是递增一个？

问题描述

我仍然是 JavaScript 和 ReactJS 的初学者。我正在做一个项目来提高我的知识。

我正在渲染一个列表，用户可以在其中按星号过滤结果，如下图所示：

在此处输入图像描述

我创建此列表的方式一点也不聪明：

import React from "react";
import "./styles.css";
import Checkbox from "@material-ui/core/Checkbox";
import StarBorderIcon from "@material-ui/icons/StarBorder";
import { useStyles } from "./styles";

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <h1>Start</h1>
      <div className={classes.root}>
        <Checkbox />
        <StarBorderIcon />
      </div>
      <div className={classes.root}>
        <Checkbox />
        <StarBorderIcon />
        <StarBorderIcon />
      </div>
      <div className={classes.root}>
        <Checkbox />
        <StarBorderIcon />
        <StarBorderIcon />
        <StarBorderIcon />
      </div>
      <div className={classes.root}>
        <Checkbox />
        <StarBorderIcon />
        <StarBorderIcon />
        <StarBorderIcon />
        <StarBorderIcon />
      </div>
      <div className={classes.root}>
        <Checkbox />
        <StarBorderIcon />
        <StarBorderIcon />
        <StarBorderIcon />
        <StarBorderIcon />
        <StarBorderIcon />
      </div>
    </div>
  );
}

你能告诉我如何渲染这个列表，总共最多 5 颗星（如图所示），总是在我的列表中添加一颗星吗？

我把我的代码放进了代码沙箱

非常感谢您提前。

标签： javascriptreactjs

解决方案

您可以创建和映射指定长度的数组，以创建各个部分和星号。

我正在使用new Array(number).fill(null)，因为我想创建一个一定长度的数组并映射它。这.fill(null)是为了摆脱empty像这样构造的数组中的特殊值，以便它们是可映射的。

您可以将逻辑全部放在一个地方，或者您可以将逻辑片段转换为单独的组件以简化您的主要组件。

本质上，我们有 2 个嵌套循环来渲染复选框和相应的星号。是否将子循环移动到它自己的组件（本示例中的 Stars 组件）中也是如此。

import React from "react";
import "./styles.css";
import Checkbox from "@material-ui/core/Checkbox";
import StarBorderIcon from "@material-ui/icons/StarBorder";
import { useStyles } from "./styles";
const array = new Array(5).fill(null);
export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <h1>Start</h1>
      {array.map((_val, idx) => (
        <div key={idx} className={classes.root}>
          <Checkbox />
          {new Array(idx + 1).fill(null).map((_val, idx2) => (
            <StarBorderIcon key={idx2} />
          ))}
        </div>
      ))}
      {/* Move some logic to a separate component */}
      {array.map((_val, idx) => (
        <div key={idx} className={classes.root}>
          <Checkbox />
          <Stars number={idx + 1} />
        </div>
      ))}
    </div>
  );
}

function Stars({ number }) {
  return new Array(number)
    .fill(null)
    .map((_val, idx) => <StarBorderIcon key={idx} />);
}

https://codesandbox.io/s/render-stars-icon-forked-wxtx4?file=/src/App.js

推荐阅读