ReactDom.Render() in SharePoint Framework App

For our current project, we need to be able to create a PDF file out of the <div></div>s.

When I look at the code for most of them, they are rending from ReactDom.Render() instead of the render class:

An example is from React-pdf:

import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

ReactDOM.render(<App />, document.getElementById('root'));

I've tried googling and playing around with it, but everything I do throws an error.

I'm fairly new to SPFx, Javascript, and React.

What I'm accustomed to using is the render method:

export default class PDF extends React.Component<IPDFProps, {}> {
  public render(): React.ReactElement<IPDFProps> {
    return (
        // my components
    );
  }
}

Its not just React-pdf, but pdfMake, react-pdf-js and others.

I can get jsPDF to work, but I don't like how you need to set the coordinates of each part. If a section changes, you have to redo all the other coordinates.

I think perhaps you are confused as to this line:

ReactDOM.render(<App />, document.getElementById('root'));

Basically this is saying render my App component (first arg) and inject it into the dom at this node (second arg).

This is just standard code to inject your react code into the dom. However, you are free to import and use the PDFViewer whereever you please. For example, you could do this:

  export default class PDF extends React.Component<IPDFProps, {}> {
  public render(): React.ReactElement<IPDFProps> {
    return (
      <PDFViewer>
        <MyDocument />
      </PDFViewer>
    );
  }
}