找不到模块ReactToPrint

Question

我使用节点16.12.0安装了ReactToPrint (https://github.com/gregnb/react-to-print#readme)库，并将其导入到我的React组件中，如上面的文档所述

import ReactToPrint from 'react-to-print';

我就是这样用它的

const ref: any = useRef()

 <ReactToPrint
      trigger={() => <span>Print this out!</span>}
      content={() => ref.current}
/>
<IncidentFrame ref={ref}> ... component to print here .... </IncidentFrame>

我一直在犯这个错误

未找到./src/components/incidents/incident/incidentDetail.tsx模块:无法解决/app/src/

//意外事件中的“对打印的反应”

这是我的package.json文件

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.5.0",
    "@types/jest": "^26.0.16",
    "@types/lodash": "^4.14.168",
    "@types/node": "^12.19.8",
    "@types/react": "^16.14.2",
    "@types/react-dom": "^16.9.10",
    "@types/react-redux": "^7.1.11",
    "@types/react-router-dom": "^5.1.6",
    "@types/redux": "^3.6.0",
    "@types/redux-form": "^8.3.0",
    "@types/redux-thunk": "^2.1.0",
    "@types/styled-components": "^5.1.4",
    "axios": "^0.21.0",
    "connected-react-router": "^6.9.1",
    "history": "^5.0.0",
    "i18next": "^19.8.5",
    "i18next-browser-languagedetector": "^6.0.1",
    "js-base64": "^3.6.0",
    "lodash": "^4.17.20",
    "react": "^17.0.1",
    "react-dates": "^21.8.0",
    "react-dom": "^17.0.1",
    "react-elastic-carousel": "^0.11.4",
    "react-google-maps": "^7.3.0",
    "react-i18next": "^11.8.5",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^5.0.0",
    "react-to-print": "^2.14.4",
    "recharts": "^2.0.6",
    "redux": "^4.0.5",
    "redux-form": "^8.3.7",
    "reselect": "^4.0.0",
    "styled-components": "^5.2.1",
    "typescript": "^4.1.2",
    "web-vitals": "^0.2.4"
  },

我试图删除包锁文件和运行npm安装，我检查了节点模块文件和反应打印在那里。

我怎样才能解决这个问题？

Answer 1

我也遇到了类似的问题，我发现的工作如下..

import { useReactToPrint } from "react-to-print";

  const dataToPrintRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => dataToPrintRef.current
  });
...
<button onClick={handlePrint}>Print</button>

<div className="div to print" ref={dataToPrintRef}>...</div>