@ реагировать-pdf / рендерер не может использовать какие-либо реактивные компоненты внутри - PullRequest
Новая
       15

@ реагировать-pdf / рендерер не может использовать какие-либо реактивные компоненты внутри

0 голосов
/ 26 марта 2020

В reactJS мое требование - сохранить файл PDF с некоторыми изображениями, содержимым, диаграммами и так далее. Для этого, когда я тестировал с программированием ниже, я не смог использовать какие-либо компоненты reactJS, и я могу использовать только {Page, Text, View, Document, StyleSheet, Image} в @react-pdf/renderer. Но мое требование использовать все компоненты. Пожалуйста, дайте мне знать любые возможные методы для запуска других компонентов, таких как <Text>,<p> внутри PdfDocument.

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>
  );
}

Umov ie .jsx 

import React from "react";
import {Page,Text,View,Document,StyleSheet,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>, то это работает нормально, но если я добавлю это, это не работает ...

...