Блог

Я пытаюсь назначить имя класса для каждого div, отображенного из массива допустимых имен символов, за исключением точки. Я использовал операторы if внутри функции map для возврата нужного объекта react, и предполагается, что он «игнорирует» точку и возвращает непрерывное нумерованное имя класса, но вместо этого он игнорирует точку, но неправильно нумерует имя класса.

Letters.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;
 

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

вы доберетесь до этого только в том else случае , если character === "." , и с тех пор i === 4 , когда это правда, этого еще может и не быть. Вероятно, вы хотите изменить порядок всех этих проверок, if (character === ".") {} else if (i === 5) {} else { /* !== "." */ }