react全局搜索高亮显示

React全局搜索高亮显示是一种常见的功能，它可以在React应用中实现对文本内容的搜索，并将匹配到的结果进行高亮显示。下面是一种实现方式：

1. 创建一个SearchHighlight组件，用于接收搜索关键词和文本内容作为props。
2. 在SearchHighlight组件中，使用正则表达式将搜索关键词在文本内容中进行匹配，并将匹配到的部分用<span>标签包裹起来，并添加一个特定的类名用于样式控制。
3. 在父组件中，通过state来保存搜索关键词，并将其传递给SearchHighlight组件。
4. 监听搜索关键词的变化，在每次变化时重新渲染SearchHighlight组件。

下面是一个简单的示例代码：

import React, { useState } from 'react';

const SearchHighlight = ({ keyword, text }) => {
  const regex = new RegExp(`(${keyword})`, 'gi');
  const parts = text.split(regex);

  return (
    <span>
      {parts.map((part, index) =>
        part.toLowerCase() === keyword.toLowerCase() ? (
          <span key={index} className="highlight">
            {part}
          </span>
        ) : (
          part
        )
      )}
    </span>
  );
};

const App = () => {
  const [searchKeyword, setSearchKeyword] = useState('');

  const handleSearchChange = (e) => {
    setSearchKeyword(e.target.value);
  };

  return (
    <div>
      <input type="text" value={searchKeyword} onChange={handleSearchChange} />
      <SearchHighlight keyword={searchKeyword} text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
    </div>
  );
};

export default App;

在上述代码中，SearchHighlight组件接收两个props：keyword和text。它使用正则表达式将keyword在text中进行匹配，并将匹配到的部分用<span>标签包裹起来，并添加了一个highlight类名用于样式控制。

在父组件App中，使用useState来保存搜索关键词searchKeyword，并通过input的onChange事件来更新searchKeyword的值。每次searchKeyword的值发生变化时，SearchHighlight组件会重新渲染，实现了全局搜索高亮显示的功能。