在浏览器中编译用户HTML并使用React显示结果

您可以使用 iframe 和 textarea 。 文本区域 将用作编辑器 iframe 作为沙盒来查看结果。

const Sandbox = () => {
  const textareaRef = useRef(null);
  const [code, setCode] = useState("");

  const runCode = () => setCode(textAreaRef.current.value);

  return (
    <div className="App">
      <div>
        <textarea ref={textareaRef}></textarea>
        <button onClick={runCode}>Run</button>
      </div>
      <iframe
        src={"data:text/html," + encodeURIComponent(code)}
        title="sandbox"
      />
    </div>
  );
  
}

在这里,我们创建 ref 访问 文本区域 内容,以及用于运行用户输入的代码段的按钮。然后将该代码传递给 iframe 使用 src 属性,然后它将像现有HTMl页面一样呈现输入的代码。看看 here 有关其工作原理的更多信息。

请参见上的工作示例 codesandbox

如果要在react中呈现html输入,可以使用下面的

const App = () => {
  const data = 'lorem <b>ipsum</b>';

  return (
    <div
      dangerouslySetInnerHTML={{__html: data}}
    />
  );
}

export default App;

这将呈现您键入的任何html。