使用html-react-parser解析含图片内容时程序崩溃求助

崩溃原因 #

当你添加图片后，value里会包含<img>标签，用parse(value)解析后得到的是React的<img>元素——这类自闭合标签根本没有props.children属性，你的getValue函数直接去访问这个不存在的属性，就会触发Cannot read properties of undefined (reading 'children')错误，直接导致程序崩了。另外，Highlighter组件的textToHighlight需要的是字符串，你传的是函数引用，这本身也不符合组件的要求。

修复步骤 #

1. 给Highlighter传字符串：把textToHighlight={getValue}改成textToHighlight={getValue()}，确保传入的是函数执行后的文本结果。
2. 安全提取文本：别直接操作解析后的React元素，用DOMParser把HTML字符串转成纯文本，不管是文字还是图片（图片会提取alt文本，没有alt就返回空），都能安全拿到给高亮组件用的内容。
3. 分离渲染和高亮：预览HTML用parse(value)，高亮单独处理纯文本，避免两者逻辑冲突。

修正后的代码 #

import parse from 'html-react-parser';
import { useState } from 'react';
import Highlighter from 'react-highlight-words';

const EditorPreview = () => {
  const [value, setValue] = useState('This is the value intially');

  // 提取HTML里的纯文本，专供Highlighter使用
  const getHighlightText = () => {
    if (!value) return '';
    const parser = new DOMParser();
    const doc = parser.parseFromString(value, 'text/html');
    return doc.body.textContent || '';
  };

  return (
    <div>
      {/* 预览编辑后的HTML内容 */}
      <div className="preview-area">
        {parse(value)}
      </div>

      {/* 高亮文本展示 */}
      <Highlighter
        highlightClassName="YourHighlightClass"
        searchWords={["and", "or", "the"]}
        autoEscape={true}
        textToHighlight={getHighlightText()}
      />
    </div>
  );
};

export default EditorPreview;

额外提示 #

如果想在渲染HTML的同时直接高亮文本，react-highlight-words做不到，因为它只能处理纯文本。这种情况要么换用支持HTML高亮的组件，要么自己写逻辑遍历解析后的React元素，给文本节点套高亮标签——但后者复杂度比较高，优先推荐分离预览和高亮的方案。

内容的提问来源于stack exchange，提问作者Newbie_developer