Código a continuación: codesandbox.io/s/muddy-monad-zqwt73?file=/src/App.js
Actualmente, sin saber por qué, las páginas no se integran en el documento y se representa un Documento vacío.
No estoy seguro de por qué. Para mí, esto se lee como que creé elementos de página, los coloqué en una lista y debería poder mapear y representar todas las páginas en el Documento. No estoy seguro de por qué no funciona.
EDITAR
Según la sugerencia, cambié el código para que se vea de la siguiente manera:
const styles = StyleSheet.create({ header: { flexDirection: 'row', textAlign: 'left', fontSize: '30px', fontFamily: 'SF Pro Text', marginBottom: '25px', marginTop: '30px', marginLeft: '30px', justifyContent: 'space-evenly' } }) class DavidPDF extends Component { constructor(name, params) { super(name, params); this.name = name; this.params = params; this.content = []; } buildPages() { console.log("building") for (let i = 0; i < this.params.length; i += 1) { console.log(i) let jsxPage = this.buildPage(this.params[i]) this.content.push(jsxPage) } } buildPage(pageParams) { console.log("building indv page") const pageName = pageParams.pageName; const viewParams = pageParams.views; const pageViewParams = []; for (let i = 0; i < viewParams.length; i += 1) { let view = this.buildView(viewParams[i]); pageViewParams.push(view); } return ( <Page> <View>{pageName}</View> </Page> ) } buildView(viewParams) { if (viewParams.viewType == "headerText") { const text = viewParams.text; return ( <View> <Text style={styles.header}> {text} </Text> </View> ) } } render() { console.log("rendering") this.buildPages(this.params) console.log(this.content) return ( <Document> {this.content} </Document> ) } } function Test() { const pagesInfo = [ { pageName: "Xtina's Page", views: [ { viewType: "headerText", text: "Xtina's page" } ] } ] let wtf = ["hi2", "hi1", "hi3"] const wtfItems = wtf.map((item) => <div>{item}</div>) return ( <div id="first"> {wtf.map((item) => <div>{item}</div>)} <PDFViewer> <DavidPDF name="hello" params={pagesInfo} /> </PDFViewer> </div> ) } export default Test;--- EDITAR ----
¡Hurra! Ese error fue arreglado. Ahora tenemos uno nuevo: las páginas no entrarán.
Hay algunos problemas, pero si puede incluir esto en Codesandbox, estará encantado de ayudarle. Está iterando mapas innecesariamente, sin asignar claves a elementos mapeados, pero el error que está viendo probablemente esté relacionado con:
const pdf = new DavidPDF("hello", pagesInfo)
Esta es una instanciación de una clase, que es un objeto, por lo que el error tiene sentido.
¿Por qué no agregarlo al render así:
<DavidPdf name="hello" params={pageInfp} /> o lo que sean los accesorios?
Además, puede ejecutar buildPages en componentDidMount y no preocuparse por llamarlo desde el padre.
En lugar de abordarlo de esta manera, lo que no funciona bien, cambié a generar una página con toda mi información de interés y agregar print css para que cuando un usuario imprima (o imprima para enviar a un usuario), los datos tiene un buen formato con puntos de ruptura para las páginas que usan solo css y @media print. ¡Recomendaría esta estrategia a otros y estoy feliz de elaborar más si alguien quiere!