在reactJS中，我的要求是保存一些图像，内容，图表等的PDF文件。为此，当我使用下面的程序进行测试时，我无法使用任何reactJS组件，并且只能在{Page,Text,View,Document,StyleSheet,Image}下使用@react-pdf/renderer。但是我要求使用所有组件。请让我知道在PdfDocument中运行其他组件（例如<Text>,<p>）的任何可能方法。

MovieList.jsx

import React,{ useState } from "react";
import { PDFDownloadLink } from "@react-pdf/renderer";
import { PdfDocument } from "./Umovie";


export default function MovieList() {
  const [data,setData] = useState([]);
  const [show,setHide] = useState(false)


  const OnGeneratePDF = async e => {
    try {
      setHide(true)
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div classname="container">
      <h2>Best movies of the year</h2>
      <button onClick={OnGeneratePDF}>GeneratePDF</button>

      {show &&<PDFDownloadLink
        document={<PdfDocument data={data} />}
        fileName="movielist.pdf"
        style={{
          textDecoration: "none",padding: "10px",color: "#4a4a4a",backgroundColor: "#f2f2f2",border: "1px solid #4a4a4a"
        }}
      >
        {({ blob,url,loading,error }) =>
          loading ? "Loading document..." : "Download Pdf"
        }
      </PDFDownloadLink>}
    </div>
  );
}

Umovie.jsx

import React from "react";
import {Page,Image} from "@react-pdf/renderer";

export function PdfDocument(props) {
    console.log("pdf props",props.data);
    return (
        <Document>
            <Page style={styles.page} type="portrait">
                {props.data
                    ? <View  style={styles.movieContainer}>
                        <View  style={styles.movieDetails}>
                        <Text style={styles.Title}>Uday Test Title</Text>
                        </View>
                        <View style={styles.overviewContainer}>
                            <p>Hi Hello How areyou</p>
                        </View>
                    </View>
            : ""}
            </Page>
        </Document>
    );
}

const styles = StyleSheet.create({
    page: {
        backgroundColor: "#ffffff"
    },section: {
        margin: 10,padding: 10,flexGrow: 1
    },movieContainer: {
        backgroundColor: "#f6f6f5",padding: 20
    },movieDetails: {
        display: "flex",marginLeft: 5
    },Title: {
        fontSize: 15,marginBottom: 10
    },Overview: {
        fontSize: 10
    },image: {
        height: 200,width: 150
    },});

在Umovie.jsx上方，如果我删除了<p>Hi Hello How areyou</p>，那么它可以正常工作，但是如果我添加它，则无法工作...