Question

我有以下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>
    );

}

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

数组或迭代器中的每个子节点都应该具有唯一的“键”支柱。检查MyList的render方法。

Answer 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>
  );
}

你有多余的大括号，并且使用字符串插值来清理它也很简洁。 key（需要反应）和href属性

Answer 2

我喜欢直接将关键字作为地图数组的索引，所以我以后不必考虑它。

＆＃13;

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>
    );
}

＆＃13;

对于包含React中渲染内部链接的循环

2 个答案: