我有一个画廊组件，它使用当前窗口大小来确定画廊项目的大小。我还 Hook 了窗口调整大小事件，以便在调整窗口大小时正确调整图库项目的大小。
在 Chrome 中，如果用户随后打印图库，则不会调整项目大小以适合打印页面。相反，他们只是使用为窗口大小计算的最后大小。即使在打印选项中从纵向切换到横向也是如此。
当打开打印对话框以及页面布局从纵向切换到横向时，是否有任何方法可以强制对重新渲染组件使用react？我认为打印对话框会使用新尺寸重新渲染页面，但情况似乎并非如此。
最佳答案
当您打印页面时，浏览器会拍摄当前 DOM 的快照并应用 print 媒体样式。您的问题是 DOM 上的元素取决于屏幕的尺寸。
窗口调整大小事件将有助于在用户调整屏幕大小时重新排列组件，但在用户打印时不会触发这些事件。但是，您可以通过多种方式在用户打印页面时监听事件。
window.onbeforeprint当用户打印页面时触发。如果发生事件，您可以调整屏幕大小以使窗口调整大小事件触发，或者以其他方式重新渲染组件。虽然 Chrome 不支持它，但请查看 this stackoverflow post ，它解释了如何使用 window.matchMedia('print') 来代替。
最好始终依赖 CSS 媒体查询，而不是屏幕尺寸和调整大小事件，但有时这并不总是可行。
关于printing - 重新渲染 Reactjs 组件以进行打印，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35072360/