简介
在前端项目中，我们经常需要快速进行界面设计与开发，而针对静态页面设计方面，往往我们需要预览效果。本篇文章将会介绍一款名为 @betty-blocks/preview 的 npm 包，它是一个基于 React 开发的组件，能够让我们方便快捷的实现静态页面或组件的预览效果展示。
安装
推荐使用 npm 或 yarn 进行安装：
npm install @betty-blocks/preview
或
yarn add @betty-blocks/preview
基本用法
在使用 @betty-blocks/preview 之前，我们需要先引入需要展示的组件：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
----- ----------- - -- -- -
------ -
-----
---------- -----------
------
--
--
------ ------- ------------接下来，我们可以在主组件中进行使用：
-- -------------------- ---- -------
-- ------
------ ----- ---- --------
------ ------- ---- ------------------------
------ ----------- ---- ----------------
----- --- - -- -- -
------ -
---------
------------ --
----------
--
--
------ ------- ----这样，我们就能够在浏览器中看到一个预览界面，展示了 MyComponent 组件所呈现的结果。
高级用法
使用 iframe 属性
在上面的例子中，我们将 MyComponent 组件直接传入 Preview 组件中进行展示。如果你需要更加高度的自定义，例如修改样式、添加 header 或 footer 等，那么我们可以使用 iframe 属性。这样，我们就可以控制 iframe 标签的各种属性，从而达到更加精确的效果。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ------------------------
------ ----------- ---- ----------------
----- --- - -- -- -
------ -
--------
---------
------ - ------ -------- ------- ------- --
------ ------- --------
--
-
------------ --
----------
--
--
------ ------- ----在这个例子中，我们将 iframe 的宽度和高度都设置为了 300px，并且添加了一个 title 属性为 Hello, world!。
自定义 header 和 footer
在有些情况下，我们需要为预览界面添加更多的自定义信息。例如：我们可以在预览界面中添加一个 header，展示当前所在页面的名称、logo 等；或者在 footer 中添加一些其他相关的信息。在 @betty-blocks/preview 中，我们就为大家提供了这种自定义界面的方式：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ------------------------
------ ----------- ---- ----------------
----- --- - -- -- -
----- ------ - -
---- -------- ---------------- ------ ------- ------ ---
--- -------- ------- - --------- -----------
------
--
----- ------ - -
---- -------- ---------------- ------- ------- ------ ---
--- -------- ------- - --------- -----------
------
--
------ -
-------- --------------- ----------------
------------ --
----------
--
--
------ ------- ----在这个例子中，我们为 Preview 组件传入了两个属性 header 和 footer，它们都是一个 React 元素，用于展示预览界面中的自定义信息。这里我们为 header 和 footer 分别添加了一个 h1 标签，以及自定义的 backgroundColor 和 height 样式。
结语
通过本篇文章，我们已经大致了解了 @betty-blocks/preview 这个 npm 包的基本使用方法以及高级用法。通过它的帮助，我们可以很方便的实现一个静态界面或者组件的预览效果。当然，除了本文介绍的方式以外，我们还可以通过一些其他的方式进行实现，例如：通过 Webpack Plugin 进行预览等。因此，在实际开发中，我们应该根据实际需求来选择最合适的方式，以实现最佳效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/betty-blocks-the-preview