我有一个像“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
2条答案
按热度按时间wyyhbhjk1#
需要根据父循环索引和当前字长计算索引
itemsRef.current[index * word.length + i] = el;
Demo
ia2d9nvy2#
这里的问题是对于每个词,你开始计算的索引从一开始:在你的例子中**“Hello world!".split(““)**这会给你2,你从头开始两次:单词.拆分(“”)
最简单的解决方案是使用列表的长度作为下一个元素的索引。