简易React Playground实现 - 3.预览实现
1.背景:
上一节我们实现了代码的转译,转译后的代码需要执行和预览。我们可以用iframe去载入对应的代码,从而实现预览效果。
2.交互分析
编辑代码→点击转译→拼接转译后的代码→iframe加载代码并执行
iframe的src,可以通过将完整的html字符串,转为Blob对象,再转为链接去获取。
3.实现
3.1拼接完整html字符串
const getHTMLStr = (code: string) => {
return `
<!doctype html>
<html lang="...
blog.ai-is-luv.com1 min read