在本文中，我们将探索 SandPack（CodeSandbox 的一个流行的 Playground 框架），并讨论如何使用它为用户创建一个更加动态和交互的环境。
本文涵盖了您需要了解的有关 SandPack 的几乎所有基本知识。然而，我的博客上详细讨论了更高级的功能，例如挂钩和自定义组件以及很酷的自定义选项。
查看本文详细版本
SandPack 是一个组件工具包，用于为博客和技术文档构建实时代码编辑器。在本文中，我们将重点关注 sandpack-react 而不是 sandpack-client，它是一个轻量级的 JavaScript 捆绑器。
SandPack 的脱颖而出之处在于提供广泛的定制选项。另外，它真的很容易上手。 sandpack-react 最有用的功能包括：
要开始使用 sandpack-react，请运行此 npm 或纱线命令：
npm 我@codesandbox/sandpack-react
或
纱线添加@codesandbox/sandpack-react
接下来，导入 Sandpack 游乐场并使用以下代码渲染它：
import { Sandpack } from "@codesandbox/sandpack-react";
export default function App() {
return <Sandpack />
}
>组件设置了一个空的游乐场供您直接跳进去。默认情况下，游乐场包含一个基本的 React 模板。让我们看看自定义模板、主题等的基本道具：
让我们调整默认的 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",
},
}}
/>
结果看起来有点像这样：
Sandpack 不仅易于使用，而且还具有超级可定制性。这使得它成为博客、文档或任何实时代码编辑增加价值的平台的绝佳选择，同时仍然允许开发人员根据他们的网站对其进行自定义。
您可以在这里查看本文的详细版本
感谢您的阅读！
以上是使用 SandPack React 创建动态代码游乐场！的详细内容。更多信息请关注PHP中文网其他相关文章！
