Question

我正在尝试打印函数的内容以反应但得到 Uncaught TypeError: Cannot read property 'innerHTML' of null

功能：

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;
}

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

Answer 1

我认为此脚本位于<head>标记内。您是否在页面加载后运行代码？

如果您想访问DOM，您需要确保您尝试访问的DOM元素确实存在。

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

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

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

使用window.print（）进行反应

1 个答案: