分配嵌套地图独特键，javascrpit

Question

我需要分配每个输入自己的ID。

const sep = words.map((word, ind) => {
  return (
     <div key={ind} className="guess__word">
       {word.split("").map((letter, id) => {
         if (letter === " ") {
           return <SpaceBox key={id} letter={letter} />;
         } else {
           return <LetterBox key={id} id={id} letter={letter} />;
         }
      })}
     </div>
   );
 });

我存在的问题是，由于地图的嵌套，ID的值不断重置为0。每个单词的长度都不同，因此如果很难弄清楚是否有一个数学方程是否会帮助我解决这个问题。

作为参考，每个单词的长度是10、3、4和4。

我还需要ID等于单词的长度。因此，我需要ID为0-20。

Answer 1

如果有点难以弄清楚是否有一个数学方程可以帮助我解决这个问题。

有 - 给定索引 X 和 Y，你可以映射到第 X 个质数的 Y 次方 - 但这在这里太过分了。只需使用字符串连接作为键，例如索引 3 和 4 可以生成 3_4 的键。

我建议 不要使用 .split('')< /code>从字符串中获取字符数组 - 而是调用数组的迭代器，否则当存在奇数字符时偶尔会遇到问题。

const sep = words.map((word, ind) => {
  return (
     <div key={ind} className="guess__word">
       {[...word].map((letter, id) => {
         const key = `${ind}_${id}`;
         if (letter === " ") {
           return <SpaceBox key={key} letter={letter} />;
         } else {
           return <LetterBox key={key} id={id} letter={letter} />;
         }
      })}
     </div>
   );
 });

如果单词可能发生变化，您可能需要使用稍微不同的键来区分 SpaceBox 字母和 LetterBox 字母。

<LetterBox key={key + ' '} id={id} letter={letter} />

如果您必须按从 0 开始的顺序仅使用数组索引，则会更丑陋 - 在外部声明最后使用的数字，然后在循环内使用并递增它。

let lastId = -1;
const sep = words.map((word) => {
  return (
     <div key={ind} className="guess__word">
       {[...word].map((letter) => {
         if (letter === " ") {
           return <SpaceBox key={++lastId} letter={letter} />;
         } else {
           return <LetterBox key={++lastId} id={lastId} letter={letter} />;
         }
      })}
     </div>
   );
 });

由于奇数键要求，如果单词是静态的，上述方法只是一个好方法。如果它们可能发生变化，请根据单词记住这些框。

Answer 2

为了节省数学，您不妨以有意义的方式连接数字

const sep = words.map((word, ind) => {
  return (
     <div key={ind} className="guess__word">
       {word.split("").map((letter, id) => {
         const key = `${ind}-{key}`;
         if (letter === " ") {
           return <SpaceBox key={key} letter={letter} />;
         } else {
           return <LetterBox key={key} id={id} letter={letter} />;
         }
      })}
     </div>
   );
 });