React JSX：锚标记数组中的 href 路径引用循环中的最后一个路径

Question

我正在尝试生成一个锚标记数组，每个锚标记都具有不同的 href 值。我运行遇到一个问题，即每个锚标记的路径结果与 for 循环末尾的路径相同。我应该如何修改我的代码，以使路径不都引用循环中路径的最后一个值？

这是我的代码：

  function generateLinks(){
    let path = '/';
    let links = [ <a href={ path }>root</a> ];
    for (let link = 0; link < 5; link++){
      const partial =  "folder"+ link;
      path += partial + '/'
      links.push(<a href={ path }>{ partial }</a>);
    }
   return links;
 }

目前输出：

[<a href='/folder0/folder1/folder2/folder3/folder4/'>root</a>,<a href='/folder0/folder1/folder2/folder3/folder4/'>folder0</a>,<a href='/folder0/folder1/folder2/folder3/folder4/'>folder1</a>,<a href='/folder0/folder1/folder2/folder3/folder4/'>folder2</a>,<a href='/folder0/folder1/folder2/folder3/folder4/'>folder3</a>,<a href='/folder0/folder1/folder2/folder3/folder4/'>folder4</a>]

我想要的输出是：

[<a href='/'>root</a>,<a href='/folder0/'>folder0</a>,<a href='/folder0/folder1/'>folder1</a>,<a href='/folder0/folder1/folder2/'>folder2</a>,<a href='/folder0/folder1/folder2/folder3/'>folder3</a>,<a href='/folder0/folder1/folder2/folder3/folder4/'>folder4</a>]

Answer 1

您发布的代码工作正常。您的真实代码必须不同。这是一个 jsfiddle，显示它具有正确的 href 值：https://jsfiddle.net/8d2xLc9L/

 function generateLinks(){
    let path = '/';
    let links = [ <a href={ path }>root</a> ];
    for (let link = 0; link < 5; link++){
      const partial =  "folder"+ link;
      path += partial + '/'
      links.push(<a href={ path }>{ partial }</a>);
    }
   return links;
 }

 document.getElementById("container").textContent = JSON.stringify(generateLinks(), null, 2);

Answer 2

没错，你的逻辑很好！

也许你在 JSX 中循环数组的方式有问题？上面的作品对我有用：

import React, {Component} from 'react';

export default class MyApp extends Component {

  constructor(props){
    super(props);
  }

  generateLinks(){
    let path = '/';
    let links = [ <a href={ path }>root</a> ];
    for (let link = 0; link < 5; link++){
      const partial =  "folder"+ link;
      path += partial + '/'
      links.push(<a href={ path }>{ partial }</a>);
    }
    return links;
  }

  render(){
    return <div>{this.generateLinks()}</div>;
  }

}

React JSX：锚标记数组中的 href 路径引用循环中的最后一个路径

React JSX: href path inside an array of anchor tags is referencing the last path in a loop

javascript

jsx

reactjs