Reactjs 尝试从组件内使用react to print进行打印

我是React编程的新手，我正在尝试添加React to Print以打印组件，打印按钮是否在组件中？ 这段代码显示了我要在窗口中打印的行的列表。print（）只打印屏幕上显示的内容，我需要它来显示所有行。但我不知道如何将React to Print添加到该按钮

请参阅下面的代码。任何帮助都将不胜感激

import React, { Component} from 'react';
import { connect } from 'react-redux';
import Window from '../../components/window';
import InfiniteTable from "../../components/infiniteTable";
import { BackButton } from "../../components/backButton";
import { WindowHeader } from '../../components/window/WindowHeader';
import Translate from '../../components/translate';
import * as utils from '../../utils/utils';







class RemainingProductsWindow extends Component {




    render() {

        return (

            <React.Fragment>




                {this.props.show &&
                    <Window show={this.props.show}

                        title={<Translate k="Products" />}
                        dismiss={() => { this.props.closeDialog("remainingProductsDialog"); }}
                        bodyClassName="mb-3 ml-3 mr-3  flex-row"
                    header={<div className="window-header flex flex-row">

                       
                            <BackButton onClick={() => { this.props.closeDialog("remainingProductsDialog"); }} />
                            <WindowHeader data={[
                                { key: <Translate k="WaveID" />, value: this.props.selectedWave ? utils.shortGUID(this.props.selectedWave.waveID) : '' },
                                { key: <Translate k="Items_Total" />, value: this.props.productDetails ? this.props.productDetails.count: 0 },
                                { key: <Translate k="Items_Remaining_Total" />, value: this.props.productDetails && this.props.productDetails.data ? this.props.productDetails.data.reduce((acc, curr) => acc += curr.remainingItems, 0): 0 } 
                            ]}
                            />

                        <i className="fas fa-print" onClick={(e) => { console.log('Print Button', e); window.print()  }}></i>


                        </div>}
                    >
                        <div className="flex flex-full flex-row">
                             
                            <InfiniteTable
                                className="product-details-table"
                                data={this.props.productDetails ? this.props.productDetails.data: null }
                                onClick={() => { }}
                                onDblClick={() => { }}
                                keyID=""
                                selectedID={null}
                                hidden={[]}
                                statusMessage={<Translate k="No_product_details_found" />}
                               //updateData={this.updateProductDetails}
                            />

                            <style dangerouslySetInnerHTML={{
                                __html: `.layout-center { overflow: initial; } `
                            }} />
                        </div>
                        </Window>}


            </React.Fragment>);
    }
}

const mapStateToProps = (state) => ({
    ...state
});






export default connect(mapStateToProps)(RemainingProductsWindow);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../../components/Window”导入窗口；
从“../../components/InfiniteTable”导入无穷大；
从“../../components/BackButton”导入{BackButton}”；
从“../../components/window/WindowHeader”导入{WindowHeader}；
从“../../components/Translate”导入翻译；
从“../../utils/utils”导入*作为utils；
类RemainingProductsWindow扩展组件{
render（）{
返回(
{this.props.show&&
{this.props.closeDialog（“remainingProductsDialog”）；}
bodyClassName=“mb-3 ml-3 mr-3柔性行”
标题={
{this.props.closeDialog（“remainingProductsDialog”）；}/>
acc+=curr.remainingItems，0）：0}
]}
/>
{console.log（'Print Button'，e）；window.Print（）}>
}
>
{ }}
onDblClick={（）=>{}
keyID=“”
selectedID={null}
隐藏={[]}
statusMessage={}
//updateData={this.updateProductDetails}
/>
}
);
}
}
常量mapStateToProps=（状态）=>({
…州
});
导出默认连接（MapStateTops）（保留ProductSwindow）；

安装此模块后，您需要导入ReactTopPrint组件并将其添加到组件中。就像在这个例子中，我尝试过这样做，问题是我看到的所有例子，似乎你必须让你在组件外部运行示例类，使用它的触发器和按钮，但是我的类RemainingProductsWindow在组件内部有一个按钮，我就是看不到如何使它工作。我想用逻辑替换打印按钮中的window.print（），将整个列表打印出来，而不仅仅是当前屏幕。谢谢