react playground
1.0.0
นี่คือตัวแก้ไขรหัสออนไลน์แบบตอบสนองที่สามารถเรียกใช้รหัสปฏิกิริยาแบบเรียลไทม์รองรับการแนะนำแบบไดนามิกของไฟล์ที่กำหนดเองและแพ็คเกจการพึ่งพาของบุคคลที่สามรองรับ TS, TSX และสามารถฝังอยู่ในโครงการ
ตัวอย่างพื้นฐาน
ตัวอย่าง Ahooks
ตัวอย่างการออกแบบมด
ตัวอย่าง antd
อาจมีการเปลี่ยนแปลง API และคุณสมบัติใหม่ก่อนเวอร์ชัน 1.0 ฉันจะแก้ไขและทำให้คงที่โดยเร็วที่สุด หากคุณสนใจคุณสามารถให้ความสนใจ
npm install react-exercise-playground --save
# or
pnpm install react-exercise-playground --save import { Playground } from 'react-exercise-playground'
export const Demo1 = ( ) => {
return < Playground />
}
Playgroundเป็นส่วนประกอบของหน้าเว็บซึ่งรุกรานไปยังสภาพแวดล้อมโฮสต์เมื่อใช้งาน (JS และ CSS บางตัวจะถูกโหลดแบบไดนามิกและแฮช URL จะเปลี่ยนไปตามค่าเริ่มต้นคุณสามารถยกเลิกการเปลี่ยนแปลง URL ได้โดยการกำหนดค่าคุณสมบัติsaveOnUrl={false})
PlaygroundSandbox เป็นส่วนประกอบที่มี Playground Sandbox ที่มีฟังก์ชั่นที่สอดคล้องกันอย่างสมบูรณ์และรายการการกำหนดค่าและถูกแยกออกจากสภาพแวดล้อมโฮสต์อย่างสมบูรณ์
หากคุณใช้เฉพาะในเอกสารหรือโครงการขอแนะนำให้ใช้ส่วนประกอบ PlaygroundSandbox
คำสั่งอ้างอิง: import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'
PlaygroundSandbox จะดาวน์โหลดแพ็คเกจจาก CDN ด้วยปริมาณเพียง 10kb+ และ 2kb+ หลังจาก GZIP
จะมีการเพิ่มแพ็คเกจที่สมบูรณ์ในอนาคตซึ่งสามารถใช้งานได้โดยไม่ต้องมีสภาพแวดล้อมเครือข่ายภายนอกและปริมาณจะมีขนาดใหญ่กว่ามาก
รหัสตัวอย่าง:
import { PlaygroundSandbox } from 'react-exercise-playground'
// import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'
export const Demo2 = ( ) => {
const files = {
'App.tsx' : `import {title} from './const'
function App() {
return <h1>this is {title}</h1>
}
export default App
` ,
'const.ts' : {
code : 'export const title = "demo2"' ,
} ,
}
return (
< >
< h1 >作为组件使用： </ h1 >
< PlaygroundSandbox
showHeader = { false }
showCompileOutput = { false }
fileSelectorReadOnly
width = { 700 }
height = { 400 }
files = { files }
border
theme = 'dark'
options = { {
lineNumbers : false ,
} }
/>
< div style = { { height : '60vh' } } > </ div >
< div >滚动到可视范围内才会加载</ div >
< PlaygroundSandbox
showHeader = { false }
showCompileOutput = { false }
fileSelectorReadOnly
width = { 700 }
height = { 400 }
files = { files }
border
theme = 'dark'
options = { {
lineNumbers : false ,
} }
/>
</ >
)
}| ชื่อ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
| ความกว้าง | สตริง丨หมายเลข丨ไม่ได้กำหนด | 100VW | ความกว้าง |
| ความสูง | สตริง丨หมายเลข丨ไม่ได้กำหนด | 100VH | สูง |
| ธีม | 'มืด' 丨 'แสง' 丨ไม่ได้กำหนด | 'แสงสว่าง' | ธีม |
| ผู้แสดง | บูลีน丨ไม่ได้กำหนด | จริง | ไม่ว่าจะแสดงหัว |
| ชายแดน | บูลีน丨ไม่ได้กำหนด | เท็จ | ไม่ว่าจะแสดงเส้นขอบ |
| showfileselector | บูลีน丨ไม่ได้กำหนด | จริง | ไม่ว่าจะแสดงแท็บไฟล์ |
| fileselectorReadonly | บูลีน丨ไม่ได้กำหนด | เท็จ | แท็บไฟล์อ่านเท่านั้นหรือไม่ |
| showcompileoutput | บูลีน丨ไม่ได้กำหนด | จริง | ไม่ว่าจะแสดงรหัสที่รวบรวม |
| ค่าเริ่มต้น | หมายเลข [] 丨ไม่ได้กำหนด | [100,100] | ระดับความกว้างของตัวแก้ไขและตัวอย่างพื้นที่ |
| ตัวเลือก | {ผ้าลินิน?: บูลีน; ฟอนต์?: หมายเลข; แท็บ?: หมายเลข} 丨 undefined | ไม่ได้กำหนด | การกำหนดค่าตัวแก้ไข |
| ไฟล์ | ไฟล์ | วัตถุ | รหัสเริ่มต้น |
| แมปนำเข้า | {นำเข้า: บันทึก <สตริงสตริง>} | defaultImportMap | เริ่มต้น importmap |
| SaveOnurl | บูลีน | จริง | เป็นรหัสที่เก็บไว้ใน URL |
| onfileschange | (แฮช: สตริง) => โมฆะ | ไม่ได้กำหนด | การโทรกลับหลังจากรหัสมีการเปลี่ยนแปลงพารามิเตอร์การโทรกลับเป็นค่าแฮชไฟล์ |
interface File {
[ key : string ] :
| string
| {
code : string
active ?: boolean
hidden ?: boolean
}
}{
"imports" : {
"react" : " https://esm.sh/[email protected] " ,
"react-dom/client" : " https://esm.sh/[email protected] "
}
}ฉันเขียนบทความเกี่ยวกับหลักการดำเนินการและกระบวนการขององค์ประกอบนี้ หากคุณสนใจคุณสามารถดู React ได้ในที่สุดก็มีสนามเด็กเล่น: ตัวแก้ไขออนไลน์ที่สามารถเรียกใช้รหัส React ในเวลาจริง
