iFlux Docs

交互式代码沙盒

使用 Sandpack 在文档中嵌入可运行代码

2026-06-0342 字1 分钟

概览

2 / 2

x

1.嵌入式 Playground 2.交互式代码沙盒

嵌入式 Playground

交互式代码沙盒

使用 Sandpack 在文档中嵌入可运行代码

2026-06-0342 字1 分钟

基础示例

import { useState } from "react"

export default function App() {
const [count, setCount] = useState(0)
return (
  <div>
    <h2>计数: {count}</h2>
    <button onClick={() => setCount(c => c + 1)}>+1</button>
    <button onClick={() => setCount(c => c - 1)}>-1</button>
  </div>
)
}

Open Sandbox

概览

2 / 2

x

1.嵌入式 Playground 2.交互式代码沙盒

嵌入式 Playground

基础示例

import { useState } from "react"

export default function App() {
const [count, setCount] = useState(0)
return (
  <div>
    <h2>计数: {count}</h2>
    <button onClick={() => setCount(c => c + 1)}>+1</button>
    <button onClick={() => setCount(c => c - 1)}>-1</button>
  </div>
)
}

Open Sandbox