Reactjs 循环遍历数组以创建反应网格。

因此，我之前已经完成了以下设置，创建了一大块html作为字符串，然后使用危险的html将其传递给div的呈现。 这次的问题是我需要使用react组件元素，而不是一团html。 例如，在标记所在的位置，我需要使用“react router dom”链接组件

<Link to={item.path}>{item.name}</Link>

{item.name}

过去我使用过这个html字符串

import React, { Fragment } from 'react';
import { Link } from 'react-router-dom';

const Menu = props => {
  const sortedList = props.list.sort((a,b) => (a.name < b.name) ? -1 : (a.name > b.name) ? 1 : 0);

  const mapToAlphaGrid = () => {
    const cap = '</div>';
    const max = sortedList.length;
    let lastChar="";
    let row = '<div class="row">';
    let col = '<div class="grid-col col-4">';
    let html = row;
    let isCap = false;

    for(var i=0; i < max; i++ ){
      let item = sortedList[i];
      let char = item.name.charAt(0);

      if(char > lastChar){
        let alphaTitle = `<div class="alpha-title">${char}</div>`
        html += isCap ? cap + col + alphaTitle : col + alphaTitle;
        isCap = true;
      }

      html += `<a class="link" href=${item.path}>${item.name}</a>`;

      lastChar = char;
      if(i >= max-1){
        return html + cap + cap;
      }
    }

  }

  return(
    <div dangerouslySetInnerHTML={{ __html: mapToAlphaGrid() }} />
  )
}

export default Menu;

import React，{Fragment}来自'React'；
从'react router dom'导入{Link}；
常量菜单=道具=>{
const sortedList=props.list.sort（（a，b）=>（a.nameb.name）？1:0）；
常量映射到alphagrid=（）=>{
常数上限=“”；
const max=分拣列表长度；
让lastChar=“”；
让row=''；
让col=''；
设html=row；
设isCap=false；
对于（变量i=0；ilastChar）{
设alphaTitle=`${char}`
html+=isCap？cap+col+alphaTitle:col+alphaTitle；
isCap=true；
}
html+=`；
lastChar=char；
如果（i>=max-1）{
返回html+cap+cap；
}
}
}
返回(
)
}
导出默认菜单；

我会用组件而不是html字符串来实现上述功能吗？ 它基本上是一个网格，但每个列可以有多个链接组件。 下面是基于我的数据数组的外观。如您所见，一些列将有2个链接和3个链接，其他列可能有1个链接

---

您需要将其转换为JSX。您可以使用

reduce

迭代已排序的项目，并创建一个菜单对象，其中每个键都是字母，值是一个项目数组：

类菜单扩展了React.Component{
mapToAlphaGrid=（）=>{
返回此.props.list.sort（（a，b）=>a.name-b.name）
.reduce（（菜单，项目）=>{
if（菜单[项目名称字符（0）]）{
//添加到现有菜单项
菜单[项目名称字符（0）]。推送（项目）
}否则{
//创建新菜单项
菜单[item.name.charAt（0）]=[item]；
}
返回菜单；
}, {});
};
renderMenu=（）=>{
const menuItems=this.mapToAlphaGrid（）；
返回Object.keys（menuItems.map）（key=>{
常量项=菜单项[键]；
报税表（
{key}

{items.map（item=>{
返回

})} 

)
});
};
render（）{
返回(
{this.renderMenu（）}
)
}
}
常数列表=[{
名字：'苹果'，
路径：'/a'
}, {
名称:"飞机",，
路径：'/a'
}, {
名称：“香蕉”，
路径：'/b'
}, {
名称：“汽车”，
路径：'/c'
}, {
名字：“乌鸦”，
路径：'/c'
}, {
名字：“奶牛”，
路径：'/c'
}, {
名字：“yoyo”，
路径：'/y'
}, {
名称：“黄色”，
路径：'/y'
}, {
名称：“斑马”，
路径：'/z'
}];
ReactDOM.render（，document.getElementById（'root'））