简明扼要实现React在线代码编辑预览组件

2023-10-02 04:33:45

打造实时代码预览：构建自己的在线代码编辑器

在当今快节奏的开发环境中，在线代码编辑器 (IDE) 已成为程序员不可或缺的工具。它们提供了便利的代码编辑和实时预览功能，大幅提升了开发效率和协作。本文将指导您构建一个基于 React 的在线代码编辑预览组件，让您轻松享受实时预览带来的便利。

组件解析：代码编辑器

我们首先创建代码编辑器组件。我们将采用 react-ace-editor 库，它提供了一个功能丰富的代码编辑器，支持多种编程语言的语法高亮和自动补全等特性。组件代码如下：

import React, { useState } from "react";
import AceEditor from "react-ace-editor";

const CodeEditor = () => {
  const [code, setCode] = useState("");

  const onChange = (newValue) => {
    setCode(newValue);
  };

  return (
    <AceEditor
      mode="javascript"
      theme="monokai"
      onChange={onChange}
      value={code}
      width="100%"
      height="500px"
    />
  );
};

export default CodeEditor;

组件剖析：预览

接下来，我们创建预览组件，它将实时显示编辑的代码。我们将利用 iframe 实现此功能。

import React, { useEffect, useState } from "react";

const Preview = ({ code }) => {
  const [previewUrl, setPreviewUrl] = useState("");

  useEffect(() => {
    const blob = new Blob([code], { type: "text/javascript" });
    const url = URL.createObjectURL(blob);
    setPreviewUrl(url);

    return () => {
      URL.revokeObjectURL(url);
    };
  }, [code]);

  return (
    <iframe src={previewUrl} width="100%" height="500px" />
  );
};

export default Preview;

组合组件：主组件

最后，我们创建主组件来组合代码编辑器和预览组件，实现代码实时预览功能。

import React, { useState } from "react";
import CodeEditor from "./CodeEditor";
import Preview from "./Preview";

const App = () => {
  const [code, setCode] = useState("");

  const onChange = (newValue) => {
    setCode(newValue);
  };

  return (
    <div className="container">
      <CodeEditor code={code} onChange={onChange} />
      <Preview code={code} />
    </div>
  );
};

export default App;