javascript - 在 react 中重构条件逻辑

Question

我有一个 React 组件，它可以渲染一张 10 孔打洞卡片。它收到一个“打洞” Prop ，以确定应填充多少打洞。我当前的代码按预期工作，但我希望能帮助您找到更优雅的解决方案。

  const punches = () => {
    const arr = [];
    let numpunch = 0;
    let i;
    for (i = 0; i < 10; i++) {
      if (numpunch !== punched) {
        arr.push(<PunchFill key={i} />);
        numpunch++;
      } else {
        arr.push(<Punch key={i} />);
      }
    }
    return arr;
  };

据我所知，内置的数组方法似乎并不能真正满足我的需要，因为这需要首先设置一个大小合适的数组，并且还会产生一个新问题，即如何跟踪已经存在的 FilledPunches 的数量。

Answer 1

你可以这样做

Array.from({length: 10}, (x, i) => i < punched ? <PunchFill key={i} /> : <Punch key={i} />);

Array.from 方法将类数组或可迭代对象转换为数组。这里我们指定了一个长度为 10 的对象，因此它创建了一个长度为 10 的数组。在第二个参数中，我们可以指定一个映射函数来调用数组的每个元素。