reactjs 将字符串拆分为单词和字母,包括空格,并为每个字母添加一个引用

qrjkbowd  于 2022-11-29  发布在  React
关注(0)|答案(2)|浏览(156)

我有一个像“Hello world!"这样的字符串。
在终点我想这样看:赫洛洛 哇!
与每个字母1 2 3 4 5的ref元素 6 7 8 9

{"Hello world!".split(" ").map((word, index) => {
      return (
        <div
          key={index}
          className="
            mr-4
            flex
          ">
          {word.split("").map((letter, i) => {
            return (
              <div
                className="inline-block"
                key={i}
                ref={(el) => {
                  itemsRef.current[i] = el;
                }}>
                {letter}
              </div>
            );
          })}
        </div>            
      );
    })}

现在一切都正常了,但是信件的ref看起来像这样:1 2 3 4 5 1 2 3 4 5 6

wyyhbhjk

wyyhbhjk1#

需要根据父循环索引和当前字长计算索引
itemsRef.current[index * word.length + i] = el;
Demo

ia2d9nvy

ia2d9nvy2#

这里的问题是对于每个词,你开始计算的索引从一开始:在你的例子中**“Hello world!".split(““)**这会给你2,你从头开始两次:单词.拆分(“”)
最简单的解决方案是使用列表的长度作为下一个元素的索引。

itemsRef.current[itemsRef.current.length] = el

相关问题