Kendo React PDF 并从 class 组件更改为函数组件

Question

我正在将我的 class 组件更改为函数组件并停留在渲染 PDF 上。它在 class 组件中运行良好。 Kendo 文档只有 class 组件使用指南。

此组件仅呈现 HTML 并为用户提供下载 PDF 的选项。

import React, { Fragment } from 'react';
import { firestoreConnect } from 'react-redux-firebase';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { PDFExport } from '@progress/kendo-react-pdf';
import { PdfButton } from 'components/StyledButtons';

import {
  Container,
  CircularProgress
} from '@material-ui/core';

function ViewProject({ _project, props }) {
  const exportBriefing = id => e => {
    this[id].save();
  };
  return (
    <Fragment>
      {_project && (
        <Container maxWidth="md">
          <PdfButton onClick={exportBriefing(_project.id)} />
            <PDFExport
              pageTemplate={DocumentTemplate}
              paperSize={'A4'}
              margin="1.5cm"
              scale={0.7}
              fileName={'Project_Brief'}
              ref={r => (this[_project.id] = r)}
            >

              <---HTML content here--->

            </PDFExport>
        </Container>
      )}
      {!_project && (
        <CircularProgress />
      )}
    </Fragment>
  );
}

const mapStateToProps = ({ firestore: { ordered } }) => ({
  _project: ordered.project && ordered.project[0],
});

export default compose(
  connect(mapStateToProps),
  firestoreConnect(props => [
    { collection: 'projects', storeAs: 'project', doc: props.match.params.id },
  ])
)(ViewProject);

这是我的错误（其中 hY2MWyk4piTBjhpJDFIc 是文档的 'id'）：

提前感谢您的任何建议。

Answer 1

功能组件的 this 上下文不会跨渲染持续存在。

您需要使用 useState 挂钩而不是 this。

Answer 2

您必须使用 useRef 挂钩，将您的 ref 声明为 null 然后获取值：

  const myRef = useRef(null);

然后附加到您要引用的组件：

    <Fragment>
      {_project && (
        <Container maxWidth="md">
          <PdfButton onClick={exportBriefing(_project.id)} />
            <PDFExport
              pageTemplate={DocumentTemplate}
              paperSize={'A4'}
              margin="1.5cm"
              scale={0.7}
              fileName={ 'Project_Brief'}
              ref={ myRef}
            >

检查 this docs 以获取与 useRef 相关的更多信息：

Answer 3

感谢 Ricardo Gonzalez 为我指明了正确的方向。我想太多了，直接使用 docs 中的 useRef 解决了这个问题。

function ViewProject({ _project }) {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.save();
  };
  return (
    <Fragment>
      {_project && (
        <Container maxWidth="md">
          <StyledPaper>
            <PdfButton onClick={onButtonClick} />
            <PDFExport
              pageTemplate={DocumentTemplate}
              paperSize={'A4'}
              margin="1.5cm"
              scale={0.7}
              fileName={`Project_Brief: ${
                _project.project_number
                }`}
              ref={inputEl}
            >

Kendo React PDF 并从 class 组件更改为函数组件

Kendo React PDF and changing from class component to function component

pdf-generation

kendo-ui

reactjs