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

Question

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

当我查看它们中的大多数代码时，它们是从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 还很陌生。

我习惯用的是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 中（第二个参数）。

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

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