ReactDom.Render () в приложении SharePoint Framework

Question

Для нашего текущего проекта нам нужно создать PDF-файл из <div></div> s.

Когда я смотрю на код для большинства из них, они отрисовываются от ReactDom.Render() вместо класса рендеринга:

Пример из 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'));

Я пробовал гуглить и играть с ним, но все, что я делаю, выдает ошибку.

Я довольно новичок в SPFx, Javascript и React.

Я привык использовать метод рендеринга:

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

Это не просто React-pdf, но pdfMake , response-pdf-js и другие.

Я могу заставить jsPDF работать, но мне не нравится, как вам нужно устанавливать координаты каждой части. Если раздел изменяется, вы должны повторить все остальные координаты.

Answer 1

Я думаю, возможно, вы не понимаете эту строку:

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

По сути, это означает, что нужно визуализировать мой компонент приложения (первый аргумент) и вставить его в dom на этом узле (второй аргумент).

Это просто стандартный код для ввода вашего кода реакции в DOM. Тем не менее, вы можете свободно импортировать и использовать PDFViewer, где пожелаете. Например, вы можете сделать это:

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