RedwoodJS 实战：使用 Storybook 构建文章摘要组件-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00579/article/details/148375309

RedwoodJS 实战：使用 Storybook 构建文章摘要组件

redwood The App Framework for Startups 项目地址: https://gitcode.com/gh_mirrors/re/redwood

前言

在构建现代 Web 应用时，组件化开发已成为主流趋势。RedwoodJS 作为一个全栈框架，提供了完整的组件开发体验。本文将详细介绍如何在 RedwoodJS 项目中利用 Storybook 来开发和测试一个具有摘要功能的文章组件。

组件功能需求分析

在博客类应用中，首页通常需要展示文章列表，但为了保持页面简洁，我们往往只需要显示每篇文章的摘要而非全文。具体需求如下：

首页文章列表只显示前100个字符的摘要
点击文章标题后可查看全文
组件需要支持两种显示模式的灵活切换

实现步骤详解

1. 改造 Article 组件

首先我们需要修改基础的 Article 组件，使其支持摘要功能：

// 文本截断工具函数
const truncate = (text, length) => {
  return text.substring(0, length) + '...'
}

// 更新后的 Article 组件
const Article = ({ article, summary = false }) => {
  return (
    <article className="mt-10">
      <header>
        <h2 className="text-xl text-blue-700 font-semibold">
          <Link to={routes.article({ id: article.id })}>{article.title}</Link>
        </h2>
      </header>
      <div className="mt-2 text-gray-900 font-light">
        {summary ? truncate(article.body, 100) : article.body}
      </div>
    </article>
  )
}

关键改进点：

新增 truncate 工具函数处理文本截断
添加 summary prop 控制显示模式
默认保持原有行为（显示全文）

2. 创建 Storybook 测试用例

Storybook 是组件开发的利器，我们可以创建多个测试用例来验证组件行为：

// 测试数据
const ARTICLE = {
  id: 1,
  title: '示例文章',
  body: `这是一篇示例文章内容，用于测试组件的摘要功能。当summary属性为true时，应该只显示前100个字符的内容...`
}

// 全文显示用例
export const full = () => {
  return <Article article={ARTICLE} />
}

// 摘要显示用例
export const summary = () => {
  return <Article article={ARTICLE} summary={true} />
}

Storybook 的优势：

隔离环境测试组件
可视化不同状态下的组件表现
方便团队协作和设计评审

3. 集成到实际页面

最后我们需要在文章列表页面应用这个新功能：

export const Success = ({ articles }) => {
  return (
    <div className="space-y-10">
      {articles.map((article) => (
        <Article article={article} key={article.id} summary={true} />
      ))}
    </div>
  )
}

注意这里我们为每个文章项都添加了 summary={true} 属性，确保列表页显示摘要。