For 循环包含 React 中渲染内的链接

Posted 2023-02-21

【中文标题】For 循环包含 React 中渲染内的链接

【英文标题】：For loop containing links inside a render in React

【发布时间】：2017-12-27 05:42:41

【问题描述】：

我有以下 vb.net 代码，我必须将其转换为 React：

For i As Integer = 0 To List.Count - 1

    MyList.AppendFormat("<li><a href=""some_url/page?id=0""><i class=""fa fa-cloud""></i> 1</a></li>", List(i).ListId, List(i).ListLocationName)

Next

到目前为止，我完成了这段代码：

render() 
     return (
         <div>
           
             <ul className="this-nav">

               this.props.list.map((value, index)=> <li><a href="some_url/page?id=" + index></a></li>)

               

            </ul>
            
        </div>
    );

这是更好的方法吗？我在控制台中收到了这条消息：

数组或迭代器中的每个子元素都应该有一个唯一的“key”道具。 检查 MyList 的渲染方法。

【问题讨论】：

但有一件事，在您的地图回调函数中，您将“值”作为参数但从未使用过，这是故意的吗？

检查这个答案When are required in react和React DOC关于如何将表达式放入JSX。

loop inside React JSX的可能重复

【参考方案1】：

试试这个：

render() 
 return (
     <div>
         <ul className="this-nav">
           
             this.props.list.map((value, index)=>  return (<li key=`index-$index`><a href= `some_url/page?id=$index` ></a></li>); )
           
        </ul>
    </div>
  );

你有多余的大括号，而且对 'li' 键（反应所需）和 href 属性使用字符串插值更简洁

【参考方案2】：

我喜欢将键直接设置为映射数组的索引，这样我以后就不必考虑了。

render() 
     return (
         <div>
             <ul className="this-nav">
               this.props.list.map((value, index)=> 
                  return (
                    <li key=index><a href="some_url/page?id=" + index></a></li>
                  )
                
               
            </ul>
        </div>
    );