ReactDom.Render() 在 SharePoint 框架应用程序中

Question

对于我们当前的项目，我们需要能够从 <div></div> 中创建一个 PDF 文件。

当我查看其中大部分的代码时，它们是从 ReactDom.Render() 渲染而不是渲染 class:

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 还很陌生。

我习惯用的是render方法：

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

它不仅是 React-pdf，还有 pdfMake, react-pdf-js 和其他。

我可以让 jsPDF 工作，但我不喜欢你需要如何设置每个部分的坐标。如果一个部分发生变化，您必须重做所有其他坐标。

Answer 1

我想您可能对这一行感到困惑：

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

基本上这是说渲染我的 App 组件（第一个参数）并将其注入到此节点的 dom（第二个参数）。

这只是将您的 React 代码注入 dom 的标准代码。但是，您可以随意导入和使用 PDFViewer。例如，您可以这样做：

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

ReactDom.Render() 在 SharePoint 框架应用程序中

ReactDom.Render() in SharePoint Framework App

javascript

reactjs

spfx

sharepointframework