在前端开发中，通常需要将数据和模板进行绑定，生成 HTML 页面。这个过程就叫做渲染。渲染的方式有很多种，其中最常用的就是 React。React 是一个非常流行的 JavaScript 库，它可以帮助你构建用户界面。
但是，在使用 React 进行静态网站构建时，我们还需要一个工具来将数据和组件渲染成 HTML 页面。而 metalsmith-react 就是这样一个工具。
什么是 metalsmith-react
metalsmith-react 是一个 Node.js 模块，它基于 Metalsmith 静态网站生成器，并使用 React 来渲染内容。
与其他静态网站生成器不同的是，metalsmith-react 允许你使用 React 组件编写页面。同时，使用 metalsmith-react 可以轻松地将数据注入到组件中进行渲染。
安装和使用
安装 metalsmith-react 可以通过 npm 进行安装：
npm install metalsmith-react
在项目中使用 metalsmith-react 也很简单。下面我们将介绍如何在 Metalsmith 中使用 metalsmith-react。
步骤一：安装 Metalsmith
首先，你需要安装 Metalsmith，如果你还没有安装，可以使用以下命令进行安装：
npm install -g metalsmith
步骤二：创建 Metalsmith 项目
然后，你需要在本地创建一个名为 my-website 的新项目，并进入该目录：
mkdir my-website && cd my-website
然后，使用以下命令初始化 Metalsmith 项目：
metalsmith init
步骤三：安装依赖
接下来，你需要安装 metalsmith-react 和其他必要的依赖：
npm install metalsmith-react react react-dom
步骤四：创建 React 组件
现在，我们将创建一个简单的 React 组件并保存在 src/templates/example.jsx 文件中：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- -------------- -
----- - ------ ---- - - ------
------ -
------
------
----------------------
-------
------
---- -------------------------- ------- ---- -- --
-------
-------
--
-此组件将通过 dangerouslySetInnerHTML 属性渲染传递给它的 HTML。
步骤五：使用 metalsmith-react 渲染页面
现在我们已经准备好了一切，只需要在 metalsmith.json 中配置 metalsmith-react 插件即可。如下所示：
-- -------------------- ---- -------
-
--------- --------
-------------- ----------
---------- -
------------------- -
---------- ------------
------------ ------------
--------------- -
---------- --------------------- ----------------------
-
-
-
-在上述配置中，pattern 属性指定要渲染的文件类型，templates 指定存放 React 组件的目录，babelOptions 则是 Babel 配置选项。
步骤六：添加页面数据
现在，我们已经准备好了要在页面上渲染的组件。但是，我们还需要将数据传递给组件。为此，我们可以使用 metadata 插件。这个插件可以让你从 JSON 文件中读取数据，并将其注入到你的 React 组件中。
npm install metalsmith-metadata
然后，在 `metals
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47769