福州小程序开发 - 福州APP开发福州软件开发福州小程序开发福州网站开发

Storybook是一个UI资源管理器，可简化开发过程中测试组件的任务。在本文中，您将学习故事书的内容，以及如何通过构建一个简单的应用程序来使用它来构建和测试React组件。我们将从一个基本的示例开始，该示例显示了如何使用故事书，然后继续为Table组件创建一个故事书，该组件将保存学生的数据。

故事书广泛用于构建活动场所和记录组件库，因为您可以更改道具值，检查加载状态以及其他定义的功能。

在继续本文之前，您应该具有React的基本知识和NPM的用法，因为我们将构建一些React组件。

故事书的故事

故事是导出的函数，可根据定义的测试用例呈现组件的给定视觉状态。这些故事保存在扩展名下.stories.js。这是一个示例故事：

import React from 'react';
import Sample from './x';

export default {
    title: 'Sample story',
    component: Sample   
}

export function Story(){
    return (
        <Sample data="sample data" />
    )
}

从故事中可以看出，故事书的优点在于它与通常编写React组件的方式没有什么不同。区别在于，除了Story组件之外，我们还导出了一个对象，该对象包含我们的故事标题和故事所要使用的组件的值。

起步

让我们从构建上述基本示例开始。此示例将使我们熟悉如何创建故事以及故事的界面外观。您将从创建React应用程序并在其中安装Storybook开始。

在终端上，运行以下命令：

# Scaffold a new application.
npx create-react-app table-component

# Navigate into the newly created folder.
cd table-component

# Initialise storybook.
npx -p @storybook/cli sb init

之后，通过运行以下命令来检查安装是否成功：

在一个终端中：

yarn start

在另一个：

yarn storybook

两个不同的屏幕将为您打招呼：React应用程序和Storybook Explorer。

在我们的应用程序中安装了Storybook之后，您将继续删除该src/stories文件夹中的默认故事。

这么多人在家工作，我们认为我们会将粉碎车间从我们的家庭办公室带到您的办公室。相约网上前端＆UX车间，用实际外卖，互动练习，录音和友好的Q＆A。

查看即将举行的研讨会↬

建立一个你好世界的故事

在本节中，您将编写第一个故事，而不是表组件的故事。这个故事是要解释一个故事如何运作的概念。有趣的是，您无需运行React即可处理故事。

由于React故事是隔离的React函数，因此您必须首先为故事定义一个组件。在该src文件夹中，创建一个components文件夹并在其中创建一个文件Hello.js，其内容如下：

import React from 'react';

export default function Hello({name}) {
  return (
    <p>Hello {name}!, this is a simple hello world component</p>
  )
}

这是一个接受nameprop 的组件，它name在某些文本旁边呈现值。接下来，你写在组件的故事src/stories在一个文件名为文件夹Hello.stories.js：

首先，导入React和Hello组件：

import React from 'react';
import Hello from '../components/Hello.js';

接下来，创建一个默认导出，该导出是一个包含故事标题和组件的对象：

export default {
  title: 'Hello Story',
  component: Hello
}

接下来，创建您的第一个故事：

export function HelloJoe() {
  return (
    <Hello name="Jo Doe" />
  )
}

在上面的代码块中，function HelloJoe()是故事的名称，函数的主体包含要在故事书中呈现的数据。在这个故事中，我们渲染的Hello组件名称为“ Jo Doe”。

这与您要在另一个组件中使用Hello组件时通常呈现的方式类似。您可以看到我们正在传递name需要在Hello组件中呈现的prop 的值。

您的故事书浏览器应如下所示：

该你好乔的故事是根据故事标题上市，并且已经呈现。每个故事都必须导出才能在故事书中列出。

如果您以标题“ Hello Story”创建更多故事，则这些故事将列在标题下，并且单击每个故事将呈现不同的效果。让我们创建另一个故事：

export function TestUser() {
    return (
        <Hello name="Test User" />
    )
}

您的故事书浏览器应包含两个故事：

一些组件根据传递给它们的props值有条件地渲染数据。您将创建一个有条件地渲染数据的组件，并在故事书中测试条件渲染：

在Hello组件文件中，创建一个新组件：

function IsLoading({condition}) {
    if (condition) {
        return (
            <p> Currently Loading </p>
        )
    return (
        <p> Here’s your content </p>
    )
}

要测试新组件的行为，您将不得不为其创建一个新的故事。在上一个故事文件中Hello.stories.js，创建一个新故事：

import Hello, { IsLoading } from '../components/Hello';

export function NotLoading() {
    return (
        <IsLoading loading={false}/>
    )
}

export function Loading() {
    return (
        <IsLoading loading={true} />
    )
}

第一个故事渲染与第二个故事渲染不同。您的故事书浏览器应如下所示：

您已经了解了创建故事和使用故事的基础。在下一节中，您将构建，样式化和测试本文的主要组件。

建立表格组件

在本节中，您将构建一个表组件，然后编写一个故事来对其进行测试。

表格组件示例将用作显示学生数据的媒介。表格部分将有两个标题。名称和课程。

首先，创建一个新文件Table.js以将组件容纳在src/component文件夹中。在新创建的文件中定义表组件：

import React from 'react';

function Table({data}) {
    return ()
}


export default Table

该Table部件取丙值data。该prop值是一个对象数组，其中包含要渲染的特定班级中学生的数据。让我们写表主体：

在返回括号中，编写以下代码：

<table>
    <thead>
        <tr>
            <th>Name</th>   
            <th>Registered Course</th>
        </tr>
    </thead>            
    <tbody>
    {data}
    </tbody>
</table>

上面的代码创建一个带有两个标题的表格，名称和注册课程。在表格主体中，呈现了学生的数据。由于对象不是有效的反应对象，因此您将必须创建一个帮助器组件来呈现单个数据。

在Table组件之后，定义帮助器组件。让我们称之为RenderTableData：

function RenderTableData({data}){
    return (
        <>
            {data.map(student => (
                <tr>
                    <td>{student.name}</td>
                    <td>{student.course}</td>
                </tr>
            ))}
        </>
    )
}

在RenderTableData上面的组件中，将作为对象数组的数据道具将被映射出来，并分别作为表数据呈现。编写好辅助组件后，Table从以下位置更新组件主体：

{data}

至

{data 
? 
    <RenderTableData data={data} />
:
    <tr>
        <td>No student data available</td>
        <td>No student data available</td>
    </tr>
}

如果存在任何数据，新的代码块将在帮助程序组件的帮助下呈现学生数据，否则，返回“无学生数据可用”。

在继续编写故事以测试组件之前，让我们对表格组件进行样式设置。style.css在components文件夹中创建一个样式表文件：

body{
    font-weight: bold;
}
table {
    border-collapse: collapse;
    width: 100%;
}
table, th, td {
    border: 1px solid rgb(0, 0, 0);
    text-align: left;
}
tr:nth-child(even){
    background-color: rgb(151, 162, 211);
    color: black;
}
th {
    background-color: rgba(158, 191, 235, 0.925);
    color: white;
}
th, td {
    padding: 15px;
}

完成样式后，将样式表导入组件文件中：

import './style.css'

接下来，让我们创建两个故事来测试表组件的行为。第一个故事将传递要渲染的数据，而第二个故事则不会。

您还可以为故事设置不同的样式。

在您的stories文件夹中，创建一个新文件Table.stories.js。首先导入react，表组件并定义故事：

import React from 'react';
import Table from '../components/Table';

export default {
    title: 'Table component',
    component: Table
}

定义故事后，为第一个故事创建虚拟数据：

const data = [
    {name: 'Abdulazeez Abdulazeez', course: 'Water Resources and Environmental Engineering'},
    {name: 'Albert Einstein', course: 'Physics'},
    {name: 'John Doe', course: 'Estate Managment'},
    {name: 'Sigismund Freud', course: 'Neurology'},
    {name: 'Leonhard Euler', course: 'Mathematics'},
    {name: 'Ben Carson', course: 'Neurosurgery'}
]

接下来，您将编写第一个故事ShowStudentsData：

export function ShowStudentsData() {
    return (
        <Table data={data} />
    )
}

接下来，转到故事书浏览器选项卡以检查故事。您的资源管理器应如下所示：

您已经用数据测试了组件，并且可以完美呈现。下一个故事将是检查行为，如果没有数据通过。

在第一个故事之后，写第二个故事EmptyData：


export function EmptyData(){
    return (
        <Table />
    )
}

上面的故事预计将呈现“无可用数据”。前往故事书浏览器以确认它可以呈现正确的消息。您的故事书浏览器应如下所示：

在本节中，您已经编写了一个表组件和一个故事来测试该行为。在下一节中，您将了解如何使用旋钮插件在故事书资源管理器中实时编辑数据。

插件

插件的故事书是由用户可选择执行额外的功能。这些额外功能可能是您的故事所必需的。Storybook提供了一些核心插件，但是您可以安装甚至构建插件来适应您的用例，例如decorator插件。

装饰器是一种将故事包裹在额外的“渲染”功能中的方法。许多插件定义了装饰器，以便通过额外的渲染来丰富您的故事，或收集有关如何渲染故事的详细信息。”

— 故事书文档

在我们的餐桌故事中添加旋钮附加组件

旋钮插件是一个装饰插件，是Storybook中最常用的插件之一。它使您能够更改组件的值（或道具），而无需修改故事功能或组件本身。

在本节中，您将把旋钮附加组件添加到我们的应用程序中。通过在故事书浏览器中设置一个新面板，您可以在其中轻松更改传递的数据，这些旋钮插件减轻了手动更新故事数据的压力。如果没有旋钮，则必须返回手动修改数据。

这样做将效率低下，并且会破坏故事书的目的，尤其是在那些有权访问故事的人无法修改代码中数据的情况下。

该旋钮插件不来安装有故事书，所以你必须安装它作为一个独立的程序包：

yarn add -D @storybook/addon-knobs

安装附加旋钮需要重新启动故事书实例才能生效。因此，停止当前故事书实例并重新启动。

安装插件后，将其注册到addons位于您的故事配置中的阵列下.storybook/main.js。

module.exports = {
    stories: ['../src/**/*.stories.js'],
    addons: [
        '@storybook/preset-create-react-app',
        '@storybook/addon-actions',
        '@storybook/addon-links',
        '@storybook/addon-knobs' // Add the knobs addon.
    ],
};

注册了插件之后，您现在可以继续执行表故事中的旋钮插件。学生数据属于对象类型，因此，您将使用插件中的object类型knobs。

在之前的导入之后，导入装饰器和对象函数：

import { withKnobs, object } from '@storybook/addon-knobs';

在默认导出中的component字段之后，添加另一个字段：

decorators: [withKnobs]

也就是说，您的故事定义对象应如下所示：

export default {
    title: 'Table component',
    component: Table,
    decorators: [withKnobs]
}

下一步是修改ShowStudentsData故事中的Table组件，以允许使用object旋钮：

之前：

<Table data={data}/>

后：

<Table data={object('data', data)}/>

object函数中的第一个参数是要在旋钮栏中显示的名称。它可以是任何东西，在这种情况下，您将其称为数据。

在您的故事书浏览器中，旋钮栏现在可见：

现在，您可以添加新数据，编辑现有数据并删除数据，而无需直接更改故事文件中的值。

结论

在本文中，您了解了故事书的全部内容，并构建了表格组件来补充说明。现在，您应该能够使用故事书随时随地编写和测试组件

福州小程序开发

使用Storybook构建React应用

故事书的故事

起步

建立一个你好世界的故事

建立表格组件

插件

在我们的餐桌故事中添加旋钮附加组件

结论