循环遍历数组以创建React网格。

Question

所以我之前完成了以下设置，创建了一大块html作为字符串，然后使用dangerouslySetInnerHTML将其传递给div的渲染。 这次的问题是我需要使用react组件元素而不是blob的html。 所以例如标签在哪里我需要使用'react-router-dom'链接组件

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

过去我使用过这个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;

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

Answer 1

您需要将其转换为JSX。您可以使用class Menu extends React.Component { mapToAlphaGrid = () => { return this.props.list.sort((a, b) => a.name - b.name) .reduce((menu, item) => { if (menu[item.name.charAt(0)]) { // Add to existing menu item menu[item.name.charAt(0)].push(item) } else { // Create new menu item menu[item.name.charAt(0)] = [item]; } return menu; }, {}); }; renderMenu = () => { const menuItems = this.mapToAlphaGrid(); return Object.keys(menuItems).map(key => { const items = menuItems[key]; return ( <div> <span>{key}</span> <ul> {items.map(item => { return <li><a href={item.path}>{item.name}</a></li > })} </ul> </div> ) }); }; render() { return ( <div> {this.renderMenu()} </div> ) } } const list = [{ name: 'apples', path: '/a' }, { name: 'airplanes', path: '/a' }, { name: 'bananas', path: '/b' }, { name: 'car', path: '/c' }, { name: 'crow', path: '/c' }, { name: 'cow', path: '/c' }, { name: 'yoyo', path: '/y' }, { name: 'yellow', path: '/y' }, { name: 'zebra', path: '/z' }]; ReactDOM.render( <Menu list={list} />, document.getElementById('root'));遍历已排序的项目并创建一个菜单对象，其中每个键都是字母，值是一个项目数组：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

<a>

您需要修改我的代码段并将react-router标记替换为<Link /> not exists。