0

在过去的几个小时里，我一直在努力解决与 react-pdf 包相关的问题。我尝试了各种在线可用的示例。但我面临同样的错误信息。

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of PDFContainer.

PDF 容器文件

import React from 'react';
import { Document, PDFDownloadLink } from 'react-pdf';
import { connect } from 'react-redux';
import exportPDF from 'Components/ExportAnswersPdf';
import { fetchQuestionnaireResults } from 'Actions/QuestionnaireResultsAction';
import ServiceFactory from '../service-factory';

export class PDFContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      export: null,
    };
  }

  handleApprove = (Params) => {
    ServiceFactory.exportAnswers(
      Params
    ).then((response) => {
      this.handleCloseModal();
      this.setState({
        export: response,
      });
    });
  }

  render() {
    return (
      <div>
        { this.state.export !== null ? (
          <div className='document'>
            <PDFDownloadLink
              document={(
                <Document>
                  <exportPDF />
                </Document>
                )}
              fileName='answers.pdf'
            >
              {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
            </PDFDownloadLink>
          </div>
        ) : null }
      </div>
    );
  }
}


export default PDFContainer;

导出PDF页面功能

import React from 'react';
import { Page, Text, View } from 'react-pdf';

const exportPDF = () => {
  return (
    <Page>
      <View>
        <Text>Section #1</Text>
      </View>
    </Page>
  );
};

export default exportPDF;

在尝试填充任何数据之前，我想我会测试仅下载 PDF 并稍后使用状态值填充数据的基本实现。任何帮助将不胜感激。

4

1 回答 1

0

您可能没有注意到您在第 8 行和第 51 行导出了组件 PDFContainer。尝试删除其中一个导出。注意错误文本。

于 2020-08-13T16:33:29.937 回答