React+Redux多关键词文本搜索及差异化高亮实现问题求助

你的问题核心出在嵌套遍历逻辑和缺少关键词-颜色的映射机制上，我来帮你修正代码并解释原因：

问题分析 #

1. 文本重复显示：你在parts.map里嵌套了KeywordsTosearch.map，这会让每个文本片段被每个关键词处理一遍，自然就导致文本重复渲染了。
2. 无法差异化高亮：代码里没有给不同关键词分配不同颜色，所有匹配的词都用了同一个红色样式，达不到区分效果。

修正后的完整代码 #

import React, { Component } from 'react';

export default class SolrSearchComponent extends Component {
  render() {
    const allText = "Sea and Sky is your one-stop source for all things related. Sea and Sky is your one-stop source for all things related.";
    // 定义关键词与对应高亮颜色的映射（转小写统一匹配规则）
    const keywordColorMap = {
      "sea": "red",
      "sky": "blue"
    };
    const keywords = Object.keys(keywordColorMap);
    
    // 拆分文本：拆分后数组会包含普通文本和匹配到的关键词片段
    const parts = allText.split(new RegExp(`(${keywords.join("|")})`, "gi"));

    return (
      <div>
        {parts.map((part, index) => {
          const lowerCasePart = part.toLowerCase();
          // 判断当前片段是否是需要高亮的关键词
          const targetColor = keywordColorMap[lowerCasePart];

          if (targetColor) {
            // 关键词片段：应用对应高亮样式
            return (
              <span 
                key={`${index}-${part}`} 
                style={{ fontWeight: 'bold', color: targetColor }}
              >
                {part}
              </span>
            );
          }
          // 普通文本：直接渲染
          return <span key={`${index}-${part}`}>{part}</span>;
        })}
      </div>
    );
  }
}

关键改进说明 #

• 关键词-颜色映射：用keywordColorMap对象明确每个关键词的高亮颜色，后续新增关键词时只需在这个对象里添加条目即可，扩展性很强。
• 单层遍历逻辑：只遍历拆分后的parts数组一次，每个文本片段只渲染一次，彻底解决重复显示问题。
• 大小写不敏感匹配：通过转小写判断片段是否属于关键词，同时保留原文本的大小写显示，符合搜索的常规需求。
• 唯一key设置：用${index}-${part}作为元素key，避免因重复文本片段导致的key冲突问题，符合React的渲染规范。

效果验证 #

现在运行代码后，文本会正常显示，所有"Sea"（包括大小写变体）会以红色粗体高亮，所有"Sky"（包括大小写变体）会以蓝色粗体高亮，完全符合你的期望。

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