如何使用react-pdf统计所有突出显示的单词数量？

Question

我使用react-pdf来渲染pdf文件，其中一个功能是统计所有高亮单词的数量，代码如下：

import React, { useCallback, useState } from 'react';
import { Document, Page } from 'react-pdf';

import samplePDF from './test.pdf';

function highlightPattern(text, pattern) {
  return text.replace(pattern, (value) => `<mark>${value}</mark>`);
}

export default function Test() {
  const [searchText, setSearchText] = useState('');

  const textRenderer = useCallback(
    (textItem) => highlightPattern(textItem.str, searchText),
    [searchText]
  );

  function onChange(event) {
    setSearchText(event.target.value);
  }

  return (
    <>
      <Document file={samplePDF}>
        <Page
          pageNumber={1}
          customTextRenderer={textRenderer}
        />
      </Document>
      <div>
        <label htmlFor="search">Search:</label>
        <input type="search" id="search" value={searchText} onChange={onChange} />
      </div>
    </>
  );
}

工作正常，但是customTextRenderer函数不告诉我渲染何时完成，所以我无法使用useState方法，例如setNumber来更新UI，我该怎么办？

我可以使用useRef来存储搜索结果，但我不能使用setState来更新useRef.current的结果。

Answer 1

在我看来，这里唯一缺少的部分是为模式计数添加一个

useState

（OP正在调用这个数字），并在

textRenderer

内设置模式计数（未添加实现）。

export default function Test() {
  const [searchText, setSearchText] = useState('');
  const [number, setNumber] = useState(0);    // ADDED

  const textRenderer = useCallback(
    (textItem) => {
       const patternCount = <TODO: IMPLEMENT> // ADDED
       setNumber(patternCount);               // ADDED
       return highlightPattern(textItem.str, searchText)
    },
    [searchText]
  );

  // remaining code