Javascript 在react中使用window.print（）

我试图在react中打印函数的内容，但是

未捕获类型错误：无法读取null的属性“innerHTML”

功能：

export default function Home(props) {
    return (
       <h4>Some other contents</h4>
       <button className='btn' type='button' onClick={printDiv('printMe')}>Print</button>
   )
}

function Data(props) {
   return (
   <div id='printMe'>
      <p>Some contents in here returning from my database</p>
      <p>On an html table</p>
   </div>
  )
}

function printDiv(divName) {
  let printContents = document.getElementById(divName).innerHTML;
  let originalContents = document.body.innerHTML;

  document.body.innerHTML = printContents;

  window.print();

  document.body.innerHTML = originalContents;
}

导出默认功能主页（道具）{
返回(
其他一些内容
打印
)
}
功能数据（道具）{
返回(
这里有些内容是从我的数据库返回的

在html表上

)
}
函数printDiv（divName）{
让printContents=document.getElementById（divName）.innerHTML；
让originalContents=document.body.innerHTML；
document.body.innerHTML=打印内容；
window.print（）；
document.body.innerHTML=原始内容；
}

---

到目前为止，一旦应用程序被加载，我就得到了错误。我不确定是什么导致了问题。

我假设此脚本位于您的

标记内。页面加载后是否正在运行代码

如果要访问DOM，则需要确保要访问的DOM元素实际存在

尝试在脚本标记上执行此操作：

<script src="path/to/your/script.js" defer></script>

---

defer

属性使其在页面完成加载后运行；因此，它可以正确访问DOM。

onClick的值必须是一个函数；如果传递一个函数会发生什么？类似于

onClick={（）=>printDiv（'printMe'）}

，这很有效。真的很有帮助，谢谢。。