Question

我必须在页面上显示PDF文件，并且文件工作正常，但是每当我打开或关闭模式时，都会重新呈现PDF。

import { documentActions } from '../_actions'

export default function DocPreview() {
    const document = useSelector(({ document }) => document)
    const [show, setShow] = useState(false)
    const dispatch = useDispatch()

    useEffect(() => dispatch(documentActions.getDocumentContent('someDocId')), [dispatch])

    return <main>
        {document.loaded && <embed src={URL.createObjectURL(document.data)} type='application/pdf' />}
        <button onClick={() => setShow(true)}>Sign document</button>
        <Modal show={show} onHide={() => setShow(false)}>
            <button className='btn btn-secondary' onClick={() => setShow(false)}>Close</button>
        </Modal>
    </main>
}

Answer 1

您可以使pdf文档成为其自己的组件，并且仅在文档更改时重新呈现：

const Pdf = React.memo(function Pdf({ document }) {
  document.loaded && (
    <embed
      src={URL.createObjectURL(document.data)}
      type="application/pdf"
    />
  );
});

在DocPreview中

<main>
  <Pdf document={document} />

如何防止元素重新渲染

1 个答案: