react调用浏览器自带的搜索高亮功能

React并没有提供直接调用浏览器自带搜索高亮功能的API，但你可以借助一些浏览器API或者第三方库实现这个功能。

一种实现方式是使用`window.find()`方法，它可以在页面中查找指定的文本，并将匹配的文本高亮显示。可以在React组件中通过`componentDidMount()`或者`useEffect()`钩子函数调用该方法，例如：

import React, { useEffect, useRef } from 'react';

function SearchableText({ text }) {
  const searchRef = useRef(null);

  useEffect(() => {
    if (searchRef.current) {
      const isMatch = window.find(searchRef.current.value, false, false, true, false, true, false);
      if (!isMatch) {
        window.getSelection().removeAllRanges();
      }
    }
  }, [text]);

  return (
    <div>
      <input type="text" ref={searchRef} placeholder="Search..." />
      <p>{text}</p>
    </div>
  );
}

这个组件会在`text`属性发生变化时调用`window.find()`方法，将搜索框中的文本作为参数传递给它。如果找到了匹配的文本，它会将匹配的文本高亮显示；如果没有找到匹配的文本，它会清空高亮显示。

另一种实现方式是使用第三方库，例如react-highlight-words或者react-text-highlight。这些库可以方便地在React应用中实现搜索高亮功能，同时还提供了更多的定制化选项。例如，使用react-highlight-words库可以这样实现：

import React from 'react';
import Highlighter from 'react-highlight-words';

function SearchableText({ text }) {
  return (
    <div>
      <Highlighter
        highlightClassName="highlight"
        searchWords={[this.state.searchText]}
        autoEscape={true}
        textToHighlight={text}
      />
    </div>
  );
}

这个组件使用Highlighter组件将`text`属性作为`textToHighlight`属性传递给它。搜索框中的文本作为`searchWords`属性传递给它，它会自动在`text`中查找匹配的文本并高亮显示。`highlightClassName`属性用于指定高亮文本的CSS类名。