使用reacttopprint组件打印ANTD表

Question

我正在尝试使用reacttopprint钩子打印ANTD表，一切似乎都很好，但我想在打印前在页面顶部显示一些文本。意味着我想显示一些标题的目的文本，当我设置标题组件的可见性为真，它不是打印在第一次点击，它显示在第二次点击，但我想显示头在第一次点击，当我打印或取消，头应该隐藏。

请帮助我，请按打印键两次看到结果在下面的链接。

https://codesandbox.io/s/usestate-not-updating-data-when-passing-from-parent-functional-component-using-r-forked-xuhnl

Thanks in Advance

Answer 1

当调用handlePrint函数时，refcomponentRef指向组件的上一个版本。printHeaderVisible仅在下一次渲染时变为true。

您可以尝试将打印调用推迟到下一次渲染，如下所示

const reactToPrintFunc = useReactToPrint({
content: () => componentRef.current,
onBeforeGetContent: () => setprintHeaderVisible(true),
onAfterPrint: () => setprintHeaderVisible(false)
});
const handlePrint = () => {
setTimeout(reactToPrintFunc, 0);
};

或按建议做

const handlePrint = useReactToPrint({
content: () => componentRef.current,
onBeforeGetContent: () => {
return new Promise((resolve) => {
setprintHeaderVisible(true);
resolve();
});
},
onAfterPrint: () => setprintHeaderVisible(false)
});