如何用React列出public/files目录下的Markdown文件？

根据你使用的构建工具/框架，有几种可扩展的方式自动列出public/files/下的Markdown文件，无需手动维护JSON：

1. 使用Vite的import.meta.glob #

Vite原生支持通过glob模式匹配文件，构建时会自动扫描匹配的文件，新增文件无需修改代码：

// 在你的组件中
const mdFiles = import.meta.glob('/public/files/*.md', { eager: false })
// 提取文件名列表
const fileList = Object.keys(mdFiles).map(filePath => {
  return filePath.split('/').pop()
})

2. 使用Webpack的require.context #

如果你用的是基于Webpack的项目（比如Create React App），可以用require.context静态扫描文件：

// 注意路径要根据组件位置调整，这里假设组件在src目录下，public/files在项目根目录
const mdContext = require.context('../../public/files', false, /\.md$/)
const fileList = mdContext.keys().map(item => item.replace('./', ''))

3. 静态站点生成框架（Next.js/Nuxt.js） #

这类框架允许在服务端/构建阶段直接用Node.js的文件系统模块读取：

Next.js 示例 #

import fs from 'fs'
import path from 'path'

export async function getStaticProps() {
  // 拼接public/files的绝对路径
  const dirPath = path.join(process.cwd(), 'public/files')
  // 读取目录下所有文件，过滤出.md后缀的
  const fileList = fs.readdirSync(dirPath).filter(file => file.endsWith('.md'))
  
  return {
    props: { fileList }
  }
}

// 在组件中接收fileList并渲染
export default function MdFileList({ fileList }) {
  return (
    <ul>
      {fileList.map(file => (
        <li key={file}>{file}</li>
      ))}
    </ul>
  )
}

这些方案的核心都是构建时自动扫描文件，新增Markdown文件后，重新构建就能自动出现在列表里，完全不需要手动维护文件列表，满足可扩展性要求。

内容的提问来源于stack exchange，提问作者Gökhan Gündüz