如何在React中集成Markdown编辑器并实现实时预览功能

要在React中集成Markdown编辑器并实现实时预览功能，可以使用第三方库React Markdown和React-Markdown并结合React组件编辑器（如react-markdown-editor）来实现。

以下是一个简单的示例：

1. 首先，安装所需的库：

npm install react-markdown react-markdown-editor

2. 创建一个MarkdownEditor组件：

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import ReactMarkdownEditor from 'react-markdown-editor';

const MarkdownEditor = () => {
  const [markdown, setMarkdown] = useState('');

  return (
    <div>
      <ReactMarkdownEditor value={markdown} onChange={setMarkdown} />
      <ReactMarkdown source={markdown} />
    </div>
  );
};

export default MarkdownEditor;

3. 在App.js中使用MarkdownEditor组件：

import React from 'react';
import MarkdownEditor from './MarkdownEditor';

const App = () => {
  return (
    <div>
      <h1>Markdown Editor</h1>
      <MarkdownEditor />
    </div>
  );
};

export default App;

现在，您可以在React应用中使用Markdown编辑器并实时预览功能。您可以编辑Markdown文本并在实时预览中看到渲染后的结果。