Реагировать - Проверить наличие пробелов в строке при итерации с Object.keys.map

Question

Я использую Anime.js для создания анимации на сайте, который я создаю. Прямо сейчас я пытаюсь оживить строку из нескольких слов.

У меня работает анимация и все с Anime.js работает нормально. Проблема, с которой я столкнулся, заключается в том, что я хочу сохранить слова, которые я оживляю, в состоянии моего компонента React следующим образом:

this.state = {
      heading: "Hudson Valley Web Design"
    }

Как видите, мой заголовок состоит из нескольких слов с пробелами. Я реализую эффекты Anime.js, перебирая this.state.heading следующим образом:

<h1 className="ml9">
          <span className="text-wrapper">
            {Object.values(this.state.heading).map((letter) => {
              // This regular expression that checks for spaces isn't 
              // working
              if(letter === /\s/g.test(letter)) {
                return <span className="letters">" "</span>
              }
              return (
                <span className="letters">{letter}</span>
              );
            })}
          </span>
        </h1>

Эффект работает правильно, но все слова сжаты вместе, т.е. "HudsonValleyWebDesign". Как я могу обнаружить пробелы в this.state.heading внутри моей функции Object.keys и поставить пробелы между каждым словом?

Также, для пояснения, мне нужно, чтобы отдельные буквы были в тегах span для применения CSS для функциональности Anime.js.

Answer 1

Вы можете использовать «split», чтобы получить массив CHAR из вашей строки, а затем перебрать его, char за char, например:

<h1 className="ml9">
          <span className="text-wrapper">
            {Object.values(this.state.heading.split('')).map((letter) => {
              // just check if the letter is space 
              if(letter === " ") {
                return <span className="letters">" "</span>
              }
              return (
                <span className="letters">{letter}</span>
              );
            })}
          </span>
        </h1>

** ПРИМЕЧАНИЕ: .split ('') дает вам массив вроде: (включая пробелы в качестве элемента)

["H", "u", "d", "s", "o", "n", "", "v", "a", "l", "l", "e" , "у", .......]

Answer 2

Пробел также является строковым символом, поэтому вы можете вернуть символ пробела так же, как и для других строковых символов, например:

{Object.values(this.state.heading).map(letter => {
  return <span className="letters">{letter}</span> 
})}

---

Вы можете проверить этот CodePen или запустить фрагмент кода ниже, чтобы увидеть, как приведенный выше код возвращает Hudson Valley Web Design с каждой буквой и пробелом внутри тег .letters <span>.

class App extends React.Component{
    constructor(props){
        super(props);
        
        this.state = {
            heading: "Hudson Valley Web Design"
        }
    }
    render() {
        return (
            <div>
                <h1 className="ml9">
                    <span className="text-wrapper">
                        {Object.values(this.state.heading).map(letter => {
                           return <span className="letters">{letter}</span> 
                        })}
                    </span>
                </h1>
            </div>
        )
    }
}
      
ReactDOM.render(<App />, document.getElementById('main'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="main"></div>