Question

我的表单上需要一个打印按钮。我正在为一个图书馆做一项研究，我发现了这个：

https://www.npmjs.com/package/react-to-print

我在考虑这个流程：一个组件导入并在我的代码中添加一行来调用该组件，打印按钮运行良好，但据我所知，这个组件需要我传递要完整打印的组件.

我尝试这样做，但出现此错误：

  Attempted import error: './index' does not contain a standard export (imported as 'FormContent').

我的索引代码：

const App = () => {
    let numb_days = 22
    return (
        <div className="m-4">
            <FormField label="Salário Base" show_small_text="false" numb_days={ numb_days }/>
            <hr />
            <h6 className="mb-4"> Qtd. dias úteis: { numb_days } </h6>
            <FormField label="Auxilio Refeição" show_small_text="true" numb_days={ numb_days }/>
            <FormField label="Auxilio Alimentação" show_small_text="true" numb_days={ numb_days }/>
            <FormField label="Plano de Saúde" show_small_text="false" numb_days={ numb_days }/>
            <FormField label="Outros Benefìcios (VT)" show_small_text="true" numb_days={ numb_days }/>
            <ComponentToPrint ref={(el) => (this.componentRef = el)} />
        </div>
    );
};

我的组件代码：

import React, { Component } from "react";
import FormContent from "./index";

class ComponentToPrint extends Component {
  render() {
    return <FormContent ref={(el) => (this.componentRef = el)} />;
  }
}

export default ComponentToPrint;

我想我一定犯了一个大错误，但我不明白如何将我的索引传递给这个组件并同时调用我的索引。

我找到了这个例子：https://codesandbox.io/s/interesting-cookies-k1bg9?file=/src/deliverySheet/ComponentToPrint.js

看来我需要遵循流程：

index -> print (my content).

但是为什么我做不到呢？ ->

index -> my content (print)

或

index -> my content AND print

Answer 1

我不确定我是否理解您的问题，但我会尝试回答它，您提供的示例由于所有子文件夹而很难阅读。基本上，您需要做的就是打印 whit react to print 制作一个普通组件并在同一级别上引用它。我看到你使用了类组件，所以我只是从 react-to-print 文档中复制和粘贴。

import React from 'react';
import ReactToPrint from 'react-to-print';

import { ComponentToPrint } from './ComponentToPrint';

class Example extends React.PureComponent {
  render() {
    return (
      <div>
        <ReactToPrint
          trigger={() => {
            // NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
            // to the root node of the returned component as it will be overwritten.
            return <a href="#">Print this out!</a>;
          }}
          content={() => this.componentRef}
        />
        <ComponentToPrint ref={el => (this.componentRef = el)} />
      </div>
    );
  }
}

它说“触发器”的地方就是你渲染按钮的地方。我希望有帮助。

如何打印具有反应打印功能的页面

1 个答案: