JSX 渲染文章列表

上一章我们已用 Vite 把博客项目跑起来，页面上却还只有一句欢迎语。真实博客首先要做的，就是把"文章列表"铺到页面上：准备一组文章数据，再用 JSX 把它渲染成一行行列表。本章就用博客首页来练习 JSX 的列表渲染。

准备文章数据

文章可以抽象成对象数组，每篇包含 id、标题、摘要、作者等字段。先在 App.jsx 里放一份临时数据：

// src/App.jsx
const posts = [
  { id: 1, title: "React 入门", summary: "认识组件与 JSX", author: "小明" },
  { id: 2, title: "Vite 实践", summary: "极速构建工具", author: "小红" },
  { id: 3, title: "Hooks 上手", summary: "让函数组件有状态", author: "小刚" },
];

用 map 渲染文章列表

JSX 里用花括号 { } 可以插入任意 JS 表达式。数组的 map 方法能把每篇文章"翻译"成一串 JSX，再整体渲染出来：

function App() {
  return (
    <div>
      <h1>我的博客</h1>
      {posts.map((post) => (
        <div key={post.id} className="post">
          <h2>{post.title}</h2>
          <p>{post.summary}</p>
          <span>作者：{post.author}</span>
        </div>
      ))}
    </div>
  );
}
// 页面效果：依次显示三篇文章的标题、摘要与作者

运行 npm run dev，浏览器中就会看到文章列表。注意：JSX 里写 CSS 类名要用 className，而不是 HTML 里的 class。

key 的作用

上面 map 返回的每个列表项都带了 key={post.id}。React 靠 key 区分列表中的每一项：将来增删、排序时，有了 key 才能精准地复用与更新对应节点，避免整列重渲染。key 必须稳定且唯一——优先用数据自带的 id；数组下标虽然能通过检查，但排序后容易张冠李戴，不推荐。

空列表与条件渲染

真实数据是异步请求的，首次渲染时常为空。空数组 map 后什么都不渲染，页面会"白板"。更友好的做法是先判断列表是否为空：

{posts.length === 0 ? (
  <p>暂无文章，请稍后刷新</p>
) : (
  posts.map((post) => (
    <div key={post.id} className="post">
      <h2>{post.title}</h2>
      <p>{post.summary}</p>
    </div>
  ))
)}

三目运算符是 JSX 里做条件渲染最常用的写法，后面的章节还会深入。

小结

列表渲染 = 数组数据 + map 遍历 + key 标记。目前数据还是写死的静态数组，下一章我们把它换成 state（状态），让数据"活"起来，能响应点击等用户操作。