简介
storybook-addon-jsx 是一个用于展示 React 组件源代码的 Storybook 插件。它可以让你直接在 Storybook 中查看和编辑 React 组件的 JSX 代码。本文将介绍该 npm 包的使用方法及其在 React 开发中的应用。
安装
使用 npm：
npm install storybook-addon-jsx --save-dev
使用 yarn：
yarn add storybook-addon-jsx --dev
配置
在工程的 .storybook/main.js 文件中添加如下配置：
module.exports = {
// ...
addons: [
// ...
'storybook-addon-jsx',
],
// ...
};使用
在你的组件 story 中，你可以使用 addWithJSX 函数来展示 JSX 代码。例如，在你的 Button 组件 story 中，你可以这样编写代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------
------ ------- -
------ ---------
---------- -------
--
------ ----- ------- - -- -- -------------- ----------------
------------- - -
----- ----------
----------- - ---- - ----- ----- - --
--
------ ----- ------- - -- -- -------------- ----------------
------------- - -
----- ----- -----
----------- -
---- -
----- ------
------------ ---------
--
--
--
------------------ - -
---- - -------------- ---- --
--其中，parameters 对象中传入 JSX 配置项，可以控制 JSX 代码的展示方式。具体参数说明如下：
skip: 是否跳过该 story 的 JSX 代码展示，默认值为false。displayName: 组件的显示名称，默认值为组件的名称。showFunctions: 是否展示函数组件源代码，默认值为false。
应用
使用 storybook-addon-jsx 可以方便地展示和编辑 React 组件的 JSX 代码。在开发 React 组件时，我们常常需要查看组件的具体实现细节，这个插件可以大大提高我们的开发效率。例如，当我们需要对组件进行样式修改时，我们可以直接在 Storybook 中编辑 JSX 代码，快速预览修改后的效果，避免频繁刷新页面的繁琐操作。
示例代码
可以使用以下代码测试 storybook-addon-jsx 插件的使用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------
------ - ---------- ---- - ---- -------------------------
------ - -------- - ---- ------------------------
------ ------- -
------ ---------
---------- -------
----------- ----------- ----------
--
------ ----- ------- - -- -- -------------- ----------------
------------- - -
----- ----------
----------- - ---- - ----- ----- - --
--
------ ----- ------- - -- -- -
--------
-------------- ------- ---------
---------
--
------------- - -
----- ----- -----
----------- -
---- -
----- ------
------------ ---------
--
--
--
------------------ - -
---- - -------------- ---- --
--其中，withKnobs 和 withA11y 是 Storybook 中内置的两个通用性的插件。withKnobs 可以让我们在 Storybook 中编辑组件的 props，方便我们测试组件在不同 props 下的表现。withA11y 可以帮助我们检测组件是否符合 Web Accessibility 相关规范。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/storybook-addon-jsx