在react中实现打印功能

最近需要在react项目中实现打印功能，刚开始想到的都是基于window.print(),但是window.print()如果直接打印的话，没有样式.直接将打印内容设置为打印的区域的话，当你取消打印的时候你会发现整个网页都被你要打印的区域占满了，你还得用window.reload()重新加载一下页面，用户交互很不好。

于是用了iframe方式解决，使用户交互更加友好，这个时候就暴露出一个问题，需要打印的内容的样式无法引入到iframe里面去,样式无法引入，样式无法引入，样式无法引入(将样式写成内联样式，这个问题可以得到解决，我的项目不适用)！！！这个样式折磨了我好久，经过查找资料，得到了解决，下面分享下。

使用react-to-print插件：
在项目中引入依赖：

在项目中引入：

在项目中使用：
在打印区域用ref获取dom.

然后在组件内调用：

下面是我测试的效果图：

这里附上插件github地址：https://github.com/gregnb/react-to-print