尝试呈现 pdf 时出现 React-pdf 错误答案

【问题标题】：React-pdf Error when trying to render pdf尝试呈现 pdf 时出现 React-pdf 错误
【发布时间】：2019-12-16 13:00:17
【问题描述】：

我对 ReactJs 完全陌生。

我正在尝试从 html 创建一个 pdf。我想在浏览器中显示文档，然后能够下载它。我正在使用 react-pdf https://react-pdf.org/

我有下面的代码，我在其中创建了我的 PDF 文档，然后我想用 PDFViewer 显示我的文档。此页面不是我的主“应用程序”页面 - 它是我可以导航到的“客户详细信息”页面。

当我运行它时，我收到以下错误：

TypeError: Failed to constructor 'Text': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

错误在这里：renderWithHooks C:/Users/Marileen/Downloads/react-material-dashboard-master (1)/react-material-dashboard-master/node_modules/@react-pdf/renderer/node_modules/react-reconciler/cjs/react- reconciler.development.js:5671 与行 5671 var children = Component(props, refOrContext);

import React from "react";
import { PDFViewer } from '@react-pdf/renderer';
import { Document, Page, View } from '@react-pdf/renderer';

const PdfDocument = () => (
    <Document>
        <Page size="A4">
            <View>
                <Text>Section #1</Text>
            </View>
        </Page>
    </Document>
);

const ClientDetails = () => {
    return (<PDFViewer>
        <PdfDocument />
    </PDFViewer>);
}
export default ClientDetails;

我尝试了不同的库，我已经安装了 babel，但我不明白如何解决 Reactjs 中的问题。

请帮忙？

【问题讨论】：

错误在<Text>。你是从哪里导入的？

标签： reactjs react-pdf

【解决方案1】：

查看 react-pdf 的文档后，您似乎还没有从它的库中导入 Text 并且您正在组件中使用它。

这就是为什么当你使用文本而不在这一行中导入它时会引发错误 -

<Text>Section #1</Text>

改变你的 -

import { Document, Page, View } from '@react-pdf/renderer'; //add Text here//

到-

import { Document, Page, View, Text } from '@react-pdf/renderer';

【讨论】：

天哪。我猜这是一个新手新手错误。非常感谢。