元素
元素
工具
博客
问答

Markdown编辑器内容无法实时预览怎么办？

FSD-文科 阅读 140
组件

我用React写了个简单的Markdown编辑器，输入框的内容变了，但预览区完全没反应，是不是状态没绑对？

试过用useState存markdown字符串，也加了onChange监听，可右边的预览就是不动。控制台也没报错，就是不更新。

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

function MarkdownEditor() {
  const [content, setContent] = useState('# Hello');
  
  return (
    <div>
      <textarea value={content} onChange={e => setContent(e.target.value)} />
      <ReactMarkdown>{content}</ReactMarkdown>
    </div>
  );
}
Markdown富文本编辑器
我来解答 赞 5 收藏
二维码
手机扫码查看
反馈
2 条解答
Zz樱潼
Zz樱潼 Lv1
问题出在 ReactMarkdown 组件的用法上。通用的做法是要把 markdown 内容通过 children 属性传进去，而不是直接写在里面。

试试这样改：

import React, { useState } from 'react';

import ReactMarkdown from 'react-markdown';



function MarkdownEditor() {

  const [content, setContent] = useState('# Hello');

  

  return (

    <div>

      <textarea value={content} onChange={e => setContent(e.target.value)} />

      <ReactMarkdown>{content}</ReactMarkdown>

    </div>

  );

}


改成这样：

import React, { useState } from 'react';

import ReactMarkdown from 'react-markdown';



function MarkdownEditor() {

  const [content, setContent] = useState('# Hello');

  

  return (

    <div>

      <textarea value={content} onChange={e => setContent(e.target.value)} />

      <ReactMarkdown><code>{content}</code></ReactMarkdown>

    </div>

  );

}


另外再检查下 ReactMarkdown 的版本，有时候新旧版本的 API 变动也会导致这种问题。我之前也遇到过类似情况，折腾了半天才发现是版本的问题，真是让人头大。记得装完依赖后最好清一下缓存再试试。
点赞
2026-03-26 07:02
Dev · 会娟
Dev · 会娟 Lv1
首先你要检查一下你的代码逻辑，看起来你的代码结构上没啥大问题，但是可能会有些细节地方导致预览没有更新。我们一步一步来排查这个问题。

首先你要确认的是，ReactMarkdown 组件的用法是否正确。ReactMarkdown 是一个解析 markdown 文本并将其转换为 React 元素的库，它的子元素应该是 markdown 字符串，而不是用花括号包裹的 JSX 表达式。你现在的写法是正确的，但为了确保没有其他问题，我们可以先简化一下代码，看看是否能正常工作。

然后你要检查的是，textarea 的 value 和 onChange 是否正确绑定到了 content 状态。从你提供的代码看，这部分应该没问题。

接下来，我们要确保 ReactMarkdown 组件在 content 变化时能够重新渲染。通常情况下，只要 content 发生变化，React 的虚拟 DOM 机制会自动触发组件的重新渲染。但是有时候，可能是由于某些原因导致渲染没有按预期进行。

我们可以尝试强制 ReactMarkdown 重新渲染，通过给它一个唯一的 key 值，这样当 key 值发生变化时，React 会认为这是一个新的组件，从而重新渲染它。

我们来修改一下代码：

import React, { useState } from 'react';

import ReactMarkdown from 'react-markdown';



function MarkdownEditor() {

  const [content, setContent] = useState('# Hello');

  

  // 使用 content 作为 key，确保 ReactMarkdown 在 content 变化时重新渲染

  return (