javascript - React - 使用 Object.keys.map 迭代时检查字符串中的空格

Question

我正在使用 Anime.js 在我正在构建的网站上制作一些动画。现在我正在尝试为一串单词制作动画。

我的动画工作正常，Anime.js 的一切工作正常。我遇到的问题是我想将我正在制作动画的单词存储在我的 React 组件的状态中，如下所示:

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

正如你所看到的，我的标题由几个带有空格的单词组成。我通过迭代 this.state.heading 来实现 Anime.js 效果，如下所示:

<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”。如何检测 Object.keys 函数内 this.state.heading 中的空格并在每个单词之间添加空格？

此外，为了澄清起见，我需要将各个字母放在 span 标记中，以便为 Anime.js 功能应用 CSS。

Answer 1

您可以使用“split”从字符串中获取一个 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"，“y”，......]