React Highlight Words使用问题：传递解析内容无显示如何修复

问题原因 #

react-highlight-words的textToHighlight属性要求传入纯文本字符串，但你当前传入的是返回JSX元素的函数getValue，组件无法识别这种输入类型，因此无法渲染内容。同时，你的场景需要保留原HTML结构并高亮关键词，直接使用默认逻辑无法满足需求，需要调整处理方式。

解决方案 #

方法1：适合简单HTML场景（如单段落文本）

先提取HTML中的纯文本，用Highlighter处理后再重新生成带高亮的HTML：

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

const YourComponent = () => {
  const [value, setValue] = useState('<p>This is the value initially</p>');

  // 从HTML字符串中提取纯文本
  const getPlainText = (html) => {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    return doc.body.textContent || '';
  };

  // 自定义渲染高亮内容，拼接成带高亮标签的HTML后解析为JSX
  const renderHighlighted = ({ parts }) => {
    const highlightedHtml = parts.map(part => 
      part.highlight ? `<span class="YourHighlightClass">${part.text}</span>` : part.text
    ).join('');
    // 此处需根据原HTML结构调整包裹标签，示例为段落
    return parse(`<p>${highlightedHtml}</p>`);
  };

  return (
    <div>
      <Highlighter
        highlightClassName="YourHighlightClass"
        searchWords={["and", "or", "the"]}
        autoEscape={true}
        textToHighlight={getPlainText(value)}
        renderHighlightedText={renderHighlighted}
      />
    </div>
  );
};

export default YourComponent;

方法2：适合复杂HTML场景（如多级标签、列表）

结合HTML解析器的转换功能，在解析HTML时对每个文本节点单独应用高亮：

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

const YourComponent = () => {
  const [value, setValue] = useState('<p>This is the value initially</p><ul><li>Another line with the keyword</li></ul>');

  // 遍历HTML节点，对文本节点应用高亮
  const transform = (node) => {
    if (node.type === 'text' && node.data.trim()) {
      return (
        <Highlighter
          highlightClassName="YourHighlightClass"
          searchWords={["and", "or", "the"]}
          autoEscape={true}
          textToHighlight={node.data}
        />
      );
    }
    // 非文本节点保持原有结构
    return domToReact(node.children, { transform });
  };

  return <div>{parse(value, { transform })}</div>;
};

export default YourComponent;

关键注意事项 #

• 必须确保textToHighlight传入的是纯文本字符串，而非JSX或函数
• 复杂HTML场景优先使用方法2，它能完整保留原有的标签结构
• 需为高亮类定义CSS样式，示例：

.YourHighlightClass {
  background-color: yellow;
}

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