Question

我正在使用react-to-print打印来自后端的动态html内容。问题是，这意味着用户单击ComponentToPrint方法中提到的按钮时，trigger已经包含必要的数据。这意味着我必须提前预加载数据，这可能会导致不合理的流量消耗。例如，我有一个待办事项列表，并且每个项目旁边都有一个复选框。用户单击这些复选框，然后有一个用于打印所选项目的按钮。当前，每次用户勾选/取消勾选某个项目时，我都会调用后端以获取选定待办事项的HTML并将其注入ComponentToPrint中。

当用户单击“打印”按钮时，是否有任何直接的解决方案来获取数据，让他等到收到包含HTML的后端的响应，然后打开打印模式？

class Print extends PureComponent {

    onBeforePrint = () => {
        // Should I make the call here ?
        // this.props.actions.getHtml()
    }

    render() {
        return (
            <li className='message-top-list__item fr'>
                <ReactToPrint
                    bodyClass={'printNames' + 'printTitles'}
                    trigger={() => <button
                        className='message-top-list__button sprite-b center-center-before pr hover-active-opacity-before print-icon'
                        type='button' />}
                    content={() => this.componentRef}
                    onBeforePrint={() => this.onBeforePrint()}
                />
                <div style={{ display: 'none' }}>
                    <ComponentToPrint
                        ref={el => (this.componentRef = el)}
                        htmlToPrint={this.props.htmlToPrint}
                    />
                </div>
            </li>
        )
    }
}

const mapStateToProps = (store) => {
    return {
        htmlToPrint: store.ModalsReducer.htmlToPrint
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(
            {
                ...PrintActions
            }, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Print)

编辑：

我觉得唯一的解决方案是从ComponentDidMount的{{1}}方法向后端进行阻塞同步调用

使用ReactJS打印动态内容

0 个答案: