Kendo React PDF и переход от компонента класса к компоненту функции - PullRequest
Новая
       51

Kendo React PDF и переход от компонента класса к компоненту функции

1 голос
/ 21 февраля 2020

Я изменяю свой компонент класса на компонент функции и застреваю на рендере PDF. Это работало нормально в компоненте класса. Документы Kendo имеют только руководство по использованию компонента класса.

Этот компонент просто отображает 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);

Это моя ошибка (где hY2MWyk4piTBjhpJDFI c является идентификатором do c):

enter image description here

Заранее благодарим за любые предложения.

Ответы [ 3 ]

0 голосов
/ 21 февраля 2020

Вы должны использовать хук useRef, чтобы объявить ваш ref как null, а затем получить значение: 

  const myRef = useRef(null);

Затем присоедините к компоненту, который вы хотите ref: 

    <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}
            >

Отметьте в этой документации , чтобы получить больше информации, связанной с useRef:

0 голосов
/ 22 февраля 2020

Спасибо Рикардо Гонсалесу за то, что он указал мне правильное направление. Я задумался над этим, и использование useRef прямо из docs устранило проблему. 

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}
            >
0 голосов
/ 21 февраля 2020

Контекст this функционального компонента не сохраняется во время рендеринга.

Вместо this.

вы захотите использовать хук useState.
...