如何用React + Tailwind实现字母分组索引页面？官方文档无参考

当然可以用 React 结合 Tailwind CSS 实现这种三栏布局的字母分组索引页面，下面是完整的实现方案：

1. 数据预处理 #

先把你提供的原始文本整理成结构化数组，每个分组包含字母和对应的条目：

const indexedData = [
  {
    letter: 'A',
    items: [
      'Alfreds Futterkiste 2 1',
      'Ana Trujillo Emparedados y helados 1',
      'Antonio Moreno Taquería 1',
      'Around the Horn 1'
    ]
  },
  {
    letter: 'B',
    items: [
      "B's Beverages 1",
      "Berglunds snabbköp 1",
      "Blauer See Delikatessen 1",
      "Blondel père et fils 1",
      "Bon app' 1",
      "Bottom-Dollar Markets 1",
      "Bólido Comidas preparadas 1"
    ]
  },
  {
    letter: 'C',
    items: [
      'Cactus Comidas para llevar 1',
      'Centro comercial Moctezuma 1',
      'Chop-suey Chinese 1',
      'Comércio Mineiro 1',
      'Consolidated Holdings 1'
    ]
  },
  {
    letter: 'D',
    items: [
      'Die Wandernde Kuh 1',
      'Drachenblut Delikatessen 1',
      'Du monde entier 2'
    ]
  },
  {
    letter: 'E',
    items: [
      'Eastern Connection 2',
      'Ernst Handel 2'
    ]
  },
  {
    letter: 'F',
    items: [
      'Familia Arquibaldo 2',
      'FISSA Fabrica Inter. Salchichas S.A. 2',
      'Folies gourmandes 2',
      'Folk och fä HB 2',
      'France restauration 2',
      'Franchi S.p.A. 2',
      'Frankenversand 2',
      'Furia Bacalhau e Frutos do Mar 2'
    ]
  },
  {
    letter: 'G',
    items: [
      'Great Lakes Food Market 2',
      'GROSELLA-Restaurante 2',
      'Galería del gastrónomo 2',
      'Godos Cocina Típica 2',
      'Gourmet Lanchonetes 2'
    ]
  },
  {
    letter: 'H',
    items: [
      'Hanari Carnes 2',
      'HILARIÓN-Abastos 2',
      'Hungry Coyote Import Store 2',
      'Hungry Owl All-Night Grocers 3'
    ]
  },
  {
    letter: 'I',
    items: [
      'Richter Supermarkt 4',
      'Island Trading 3'
    ]
  },
  {
    letter: 'K',
    items: [
      'Königlich Essen 3'
    ]
  },
  {
    letter: 'L',
    items: [
      'La corne d\'abondance 3',
      'La maison d\'Asie 3',
      'Laughing Bacchus Wine Cellars 3',
      'Lazy K Kountry Store 3',
      'Lehmanns Marktstand 3',
      'Let\'s Stop N Shop 3',
      'LILA-Supermercado 3',
      'LINO-Delicateses 3',
      'Lonesome Pine Restaurant 3'
    ]
  },
  {
    letter: 'M',
    items: [
      'Magazzini Alimentari Riuniti 3',
      'Maison Dewey 3',
      'Morgenstern Gesundkost 3',
      'Mère Paillarde 3'
    ]
  },
  {
    letter: 'N',
    items: [
      'North/South 3'
    ]
  },
  {
    letter: 'O',
    items: [
      'Océano Atlántico Ltda. 3',
      'Old World Delicatessen 4',
      'Ottilies Käseladen 4'
    ]
  },
  {
    letter: 'P',
    items: [
      'Paris spécialités 4',
      'Pericles Comidas dásicas 4',
      'Piccolo und mehr 4',
      'Princesa Isabel Vinhos 4'
    ]
  },
  {
    letter: 'Q',
    items: [
      'Queen Cozinha 4',
      'QUICK-Stop 4',
      'Que Delícia 4'
    ]
  },
  {
    letter: 'R',
    items: [
      'Rancho grande 4',
      'Rattlesnake Canyon Grocery 4',
      'Reggiani Caseifid 4',
      'Ricardo Adocicados 4',
      'Romero y tomillo 4'
    ]
  },
  {
    letter: 'S',
    items: [
      'Santé Gourmet 4',
      'Save-a-lot Markets 4',
      'Seven Seas Imports 4',
      'Simons bistro 5',
      'Split Rail Beer & Ale 5',
      'Spécialités du monde 5',
      'Suprêmes délices 5'
    ]
  },
  {
    letter: 'T',
    items: [
      'The Big Cheese 5',
      'The Cracker Box 5',
      'Toms Spezialitäten 5',
      'Tortuga Restaurante 5',
      'Tradição Hipermercados 5',
      'Trail\'s Head Gourmet Provisioners 5'
    ]
  },
  {
    letter: 'V',
    items: [
      'Vaffeljernet 5',
      'Victuailles en stock 5',
      'Vins et alcools Chevalier 5'
    ]
  },
  {
    letter: 'W',
    items: [
      'Wartian Herkku 5',
      'Wellington Importadora 5',
      'White Clover Markets 5',
      'Wilman Kala 5',
      'Wolski Zajazd 5'
    ]
  }
];

2. 实现React组件 #

下面是完整的组件代码，用Tailwind CSS实现三栏布局：

import React from 'react';

const IndexPage = () => {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-2xl font-bold mb-6">字母分组索引</h1>
      {/* 响应式三栏布局：移动端单栏，平板双栏，桌面三栏 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {indexedData.map((group) => (
          <section key={group.letter} className="space-y-3">
            {/* 字母标题 */}
            <h2 className="text-xl font-semibold text-gray-800 border-b pb-1">
              {group.letter}
            </h2>
            {/* 条目列表 */}
            <ul className="space-y-1 text-gray-700">
              {group.items.map((item, idx) => (
                <li key={idx} className="hover:text-gray-900">{item}</li>
              ))}
            </ul>
          </section>
        ))}
      </div>
    </div>
  );
};

export default IndexPage;

关键实现说明 #

• 三栏布局：通过Tailwind的grid-cols-1 md:grid-cols-2 lg:grid-cols-3实现响应式适配，不同屏幕尺寸自动调整列数
• 分组样式：每个字母分组用section包裹，标题加粗加下边框区分，条目列表设置间距提升可读性
• 数据遍历：用map方法遍历结构化数据，动态渲染所有字母分组和对应条目
• 交互细节：给列表项添加hover效果，增强页面交互感

内容的提问来源于stack exchange，提问作者CCTV