map function 減少索引不起作用（使用 React）

Question

我正在嘗試為從字符數組映射的每個 div 分配一個 className 有效名稱（句點除外）。 我在 map function 中使用了 if 語句來返回所需的反應 object 並且它應該“忽略”句點並返回一個連續編號的類名 className 但它確實忽略了數字。

字母.js

import { Fragment } from "react";

const Letters = () => {
  const characters = "STRI.G".split("");

  const stringBuilder = characters.map((character, i) => {
    if (character !== ".") {
      return <div className={`type${i + 1}`}>{character}</div>; // Works
    } else if (i === 5) {
      // If index value reached the value after '.'
      return <div className={`type${i - 1}`}>{character}</div>; // Does not work, className here remains "type6" instead of "type5"
    } else {
      return <div>{character}</div>; // For when character === '.'
    }
  });

  return <Fragment>{stringBuilder}</Fragment>;
};

export default Letters;

Answer 1

 else if (i === 5) { // && character === ".", or else we wouldn't get here

如果 character === "." 你只會得到那個else if character === "." ，並且由於i === 4當這是真的時，否則這也可能不存在。 您可能想要顛倒所有這些檢查的順序， if (character === ".") {} else if (i === 5) {} else { /*.== "." */ } if (character === ".") {} else if (i === 5) {} else { /*.== "." */ }