代码之家 › 专栏 › 技术社区 › Nick Kinlen

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

iteration object reactjs regex javascript

Nick Kinlen · 技术社区 · 6 年前

我正在使用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>

这个国家的标题 在我的Object.keys函数中,在每个单词之间放置空格?

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

2 回复 | 直到 6 年前

Tarreq 6 年前

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

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

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

AndrewL64 6 年前

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

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