使用 SandPack React 创建动态代码游乐场！-js教程-PHP中文网

在本文中，我们将探索 SandPack（CodeSandbox 的一个流行的 Playground 框架），并讨论如何使用它为用户创建一个更加动态和交互的环境。

本文涵盖了您需要了解的有关 SandPack 的几乎所有基本知识。然而，我的博客上详细讨论了更高级的功能，例如挂钩和自定义组件以及很酷的自定义选项。

查看本文详细版本

什么是沙包

SandPack 是一个组件工具包，用于为博客和技术文档构建实时代码编辑器。在本文中，我们将重点关注 sandpack-react 而不是 sandpack-client，它是一个轻量级的 JavaScript 捆绑器。

SandPack 的脱颖而出之处在于提供广泛的定制选项。另外，它真的很容易上手。 sandpack-react 最有用的功能包括：

针对流行语言和框架的预构建模板
为编辑器提供大量预构建主题以及创建自定义主题的选项。
支持所有 npm 依赖项和主要 JavaScript 框架。
自定义 UI 和游乐场几乎各个方面的选项。
您可以使用预构建的可组合组件创建一个完全自定义的 Playground。
提供者和自定义挂钩可用于创建自定义组件。

游乐场概览

要开始使用 sandpack-react，请运行此 npm 或纱线命令：

npm 我@codesandbox/sandpack-react

或
纱线添加@codesandbox/sandpack-react

接下来，导入 Sandpack 游乐场并使用以下代码渲染它：

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

登录后复制

Create a Dynamic Code Playground with SandPack React!

>组件设置了一个空的游乐场供您直接跳进去。默认情况下，游乐场包含一个基本的 React 模板。让我们看看自定义模板、主题等的基本道具：

template：此属性接受预定义的模板列表。默认情况下，设置为 vanilla。
files：这是一个非常有用的属性。您可以使用自定义代码创建多个文件，类似于常规文件夹结构。文件对象包含一个值（相对文件路径）和键（文件内容）。然后，该对象中的文件也会自动显示在选项卡中。
选项：您可以使用选项对象自定义多个功能。您可以在此处查看完整列表。一些最有用的包括：
- showLineNumbers：切换行号的可见性。
- showTabs：切换选项卡的可见性。
- 类：您可以将自定义类名称分配给现有模板类以进行进一步自定义。
依赖项：依赖项对象可以包含应用程序所需的任何 NPM 包。格式和语法与 package.json 文件类似。
主题：您可以选择预先构建的主题或分配完全自定义的主题。

定制游乐场

让我们调整默认的 Playground 以适应我们的风格，并创建一个有趣的示例来玩。自定义编辑器以匹配您的网站主题可以使其无缝融合，而不是感觉像第三方嵌入。首先，让我们使用 files 属性创建一个简单的计数器按钮。除了 App.js 文件之外，我们还将创建 App.css 文件。

看看下面的示例和代码：

在此示例中，计数器组件在 Playground 中渲染。文件对象包含 App.js 和 App.css 的代码。我们从前面提到的预构建列表中选择了一个主题，源自沙包主题，添加了一丝风格。行号也已设置为 true。

此外，您可以轻松自定义游乐场的布局。这可以通过应用自定义类或利用 SandPack 提供的预构建选项来完成。例如，您可以使用这样的自定义类：

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

登录后复制

然后，您可以使用 CSS 调整外观和布局，从而更好地控制视觉设计。

另一个有用的功能是能够在不同的布局模式之间切换。 SandPack 提供三种模式：预览、测试和控制台。默认模式是预览，而测试模式提供了用于运行测试的套件，控制台模式呈现终端/控制台组件而不是预览窗口。控制台模式对于显示服务器端逻辑的输出非常有用。您还可以使用 rtl（从右到左布局）选项切换布局方向。

自定义输出

除了编辑器本身之外，还可以自定义输出显示。例如，您可以选择显示或隐藏控制台、更改布局，甚至修改预览窗口的外观。很酷吧！代码编辑器通常有大量定制的编辑窗口，但实际输出却没有受到太多关注。

控制台显示各种错误和控制台日志。根据所显示的代码片段的类型，您可能想要显示或隐藏控制台。您还可以切换显示控制台按钮的可见性。默认情况下，控制台是隐藏的。与所有 SandPack 组件一样，可以使用自定义 CSS 类单独修改样式。

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

登录后复制

除了控制台之外，显示窗口本身也可以自定义。例如，您可以使用 showNavigator 选项打开或关闭导航栏，并决定是否希望使用 resizingPanels 选项调整面板的大小。

<Sandpack
  theme={theme}
  template="react"
  options={{
    classes: {
      "sp-wrapper": "custom-wrapper",
      "sp-layout": "custom-layout",
      "sp-tab-button": "custom-tab",
    },
  }}
/>

登录后复制

结果看起来有点像这样：

Create a Dynamic Code Playground with SandPack React!