通过 props 更改 React 中的元素

Question

我想制作一个简单的 React 组件，发送 1 到 5 之间的值，然后渲染一个包含 5 个“部分”的进度条，但只对发送的数量进行着色（如果有意义的话）。我制作了这个codesandbox来演示我的意思。例如，如果我在 app.js 中传递值 3，我希望它仅在我的progress.js 组件中点亮 3 个绿色条。

我考虑的一种方法是以某种方式仅从前 3 个部分（或者我决定传递给 props 的许多部分）中删除进度条空 className 或使用循环 - 但我不能使用 .map因为我认为它不是一个数组。正如你可能知道的那样，我对 Web 开发尤其是 JavaScript 和 React 还很陌生，所以感谢你的耐心和理解，如果答案真的很明显，我很抱歉。希望这个问题可以帮助其他人:)

Answer 1

根据你的问题，你只需要创建一个包含五个元素的随机数组，然后使用方法

Array.map

检查

props.value

是否大于

index

然后返回元素为

progress-bar

，其他为

 progress-bar-empty

export default function Progress(props) {
  console.log(props.value);
  return (
    <div className="progress col">
      {Array(5).fill('').map((_, index) =>
        index < props.value ? (
          <div className="progress-bar"></div>
        ) : (
          <div className="progress-bar progress-bar-empty"></div>
        )
      )}
    </div>
  );
}

Answer 2

例如你可以这样实现

export default function Progress({ value }) {
  return (
    <div className="progress col">
      {Array.from({ length: 5 }).map((_, index) => (
        <div
          key={index}
          className={
            index < value ? "progress-bar" : "progress-bar progress-bar-empty"
          }
        ></div>
      ))}
    </div>
  );
}