Javascript React-使用Object.keys.map进行迭代时，检查字符串中是否有空格

我正在使用Anime.js在我正在构建的网站上制作一些动画。现在，我正在尝试制作一个由几个单词组成的字符串的动画

我有动画工作，一切与Anime.js工作良好。我遇到的问题是，我想在React组件的状态下存储我正在制作动画的单词，如下所示：

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

<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>

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

正如你所看到的，我的标题由几个带空格的单词组成。我通过迭代

this.state.heading

实现Anime.js效果，如下所示：

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

<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>

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

{Object.values（this.state.heading）.map（（字母）=>{
//此检查空格的正则表达式不可用
//工作
如果（字母==/\s/g.test（字母））{
返回“”
}
返回(
{字母}
);
})}

效果正常，但所有的文字都挤在一起，即“HudsonValleyWebDesign”。如何在Object.keys函数中检测

this.state.heading

中的空格，并在每个单词之间放置空格

---

另外，为了澄清，为了将CSS应用于Anime.js功能，我需要将单个字母放在span标记中。

空白也是一个字符串，因此您可以像返回其他字符串一样返回空白字符，如下所示：

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

<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>

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

---

空白也是一个字符串，因此您可以像返回其他字符串一样返回空白字符，如下所示：

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

<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>

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

您可以使用“拆分”从字符串中获得一个字符数组，然后逐字符循环，如：

<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>

{Object.values（this.state.heading.split（“”））.map（（字母）=>{
//只需检查字母是否为空格
如果（字母==“”）{
返回“”
}
返回(
{字母}
);
})}

**注意：.split（“”）提供如下数组：（包括空格作为元素）

[“H”、“u”、“d”、“s”、“o”、“n”、“I”、“v”、“a”、“l”、“l”、“e”、“y”等]

您可以使用“拆分”从字符串中提取字符数组，然后逐字符循环，如：

<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>

{Object.values（this.state.heading.split（“”））.map（（字母）=>{
//只需检查字母是否为空格
如果（字母==“”）{
返回“”
}
返回(
{字母}
);
})}

**注意：.split（“”）提供如下数组：（包括空格作为元素）

---

[“H”、“u”、“d”、“s”、“o”、“n”、“s”、“v”、“a”、“l”、“l”、“e”、“y”等等]

我不使用动画，但不应该

“

是

左右吗？如果我理解正确，您希望将原始字符串拆分为单词，以便对其进行动画处理，并在动画结束时渲染原始字符串？如果是这样，您就不需要正则表达式了——您可以使用var splitHeading=this.state.heading.split（“”），它返回['Hudson'，'Valley'，'Web'，'Design']。映射新的var并返回{letter+“”}@stever，这是正确的。不清楚为什么它会显示为

HudsonValleyWebDesign

。我假设OP描述的行为是特定于动画库的。{letter+“”}？我不使用动画，但是

“

不应该是

左右吗？如果我理解正确，您希望将原始字符串拆分为单词，以便可以设置动画，并在动画结束时渲染原始字符串？如果是这样，您就不需要正则表达式了——您可以使用var splitHeading=this.state.heading.split（“”），它返回['Hudson'，'Valley'，'Web'，'Design']。映射新的var并返回{letter+“”}@stever，这是正确的。不清楚为什么它会显示为

HudsonValleyWebDesign

。我假设OP描述的行为是特定于动画库的。{letter+“”}？这对我很有用。唯一的变化是我不得不在span中使用

来代替“”。正在展示报价单。谢谢你的帮助。这肯定不需要正则表达式，我想得太多了。

Object.values

根本不需要。@estus我的解决方案使用

Object.values

在一行中返回与上面完全相同的内容，但我现在很好奇你会怎么做。你能在上面贴个答案或者用我的密码笔吗？干杯。@AndrewL它不是

Object.values（this.state.heading）

就是

this.state.heading.split（“”）

。两者都将字符串转换为字符数组。同时使用两者是多余的。这对我来说很有效。唯一的变化是我不得不在span中使用

来代替“”。正在展示报价单。谢谢你的帮助。这肯定不需要正则表达式，我想得太多了。

Object.values

根本不需要。@estus我的解决方案使用

Object.values

在一行中返回与上面完全相同的内容，但我现在很好奇你会怎么做。你能在上面贴个答案或者用我的密码笔吗？干杯。@AndrewL它不是

Object.values（this.state.heading）

就是

this.state.heading.split（“”）

。两者都将字符串转换为字符数组。同时使用两者是多余的。