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

Для нашего текущего проекта нам нужно создать 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, react-pdf-js и другие.

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


reactjs javascript spfx sharepointframework
person Holden1515    schedule 14.06.2019    source источник
comment
Какая версия реакции используется в вашем проекте?   -  person statto    schedule 19.07.2019
comment
@statto 16.7 реагировать   -  person Holden1515    schedule 19.07.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

  export default class PDF extends React.Component<IPDFProps, {}> {
  public render(): React.ReactElement<IPDFProps> {
    return (
      <PDFViewer>
        <MyDocument />
      </PDFViewer>
    );
  }
}
person jsdeveloper    schedule 14.06.2019
comment
Видишь, я тоже так подумал. Когда я пытаюсь это сделать, я получаю ошибку Cannot set property 'getCurrentStack' of undefined в файле react-reconciler.development.js. Я подумал, что это просто что-то, чего я не понимал во взаимоотношениях всех различных технологий. - person Holden1515; 14.06.2019
comment
Вы имели в виду, что код должен быть на машинописном языке? Это может быть причиной.. - person jsdeveloper; 15.06.2019
comment
Да, это веб-часть SPFx, поэтому она использует Typescript. - person Holden1515; 17.06.2019