Kendo React PDF 및 클래스 구성 요소에서 함수 구성 요소로 변경
브래드 스튜어트
클래스 구성 요소를 함수 구성 요소로 변경하고 렌더링 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);
이것은 내 오류입니다 (hY2MWyk4piTBjhpJDFIc은 문서의 'id'입니다).
제안에 미리 감사드립니다.
리카르도 곤잘레스
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}
>
관련 정보를 더 얻으려면 이 문서 를 확인하세요 useRef.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
React-부모 클래스 구성 요소 함수 자식 구성 요소의 클래스 변경
- 2
React에서 클래스 구성 요소를 기능 구성 요소로 변환
- 3
React-Preference : 함수 클래스 대 구성 요소 클래스
- 4
React Native : 기능적 구성 요소에서 클래스 구성 요소로
- 5
React Native : 동일한 클래스 내에서 함수 구성 요소 호출
- 6
이제 함수 구성 요소에서 useState를 사용할 수 있으므로 react에서 클래스 구성 요소를 언제 사용합니까?
- 7
속성이 정의되지 않았습니다-React의 클래스 구성 요소에서 함수 후크 구성 요소로 전환
- 8
정적 오류 함수로 클래스 구성 요소를 기능 구성 요소로 변환하는 반응
- 9
React.js 및 구성 요소 로컬 변수
- 10
react-router 및 redux 컨테이너 구성 요소를 사용하여 경로 매개 변수를 스레딩
- 11
함수 소품을 자식 구성 요소에 전달 (링크 및 경로 구성 요소를 통해)
- 12
React의 자식 구성 요소에서 onchange 이벤트로 부모 클래스 구성 요소의 함수를 호출하는 방법은 무엇입니까?
- 13
다른 클래스 구성 요소 내에서 React 클래스 구성 요소를로드 할 수 없습니다.
- 14
반응 : 클래스 기반 구성 요소에서 기능 기반 구성 요소로 변경
- 15
react-router에서 하위 구성 요소로 변수 전달
- 16
유창한 UI에서 함수 구성 요소를 클래스 구성 요소로 변환하는 방법은 무엇입니까?
- 17
React 오해. FC 및 클래스 구성 요소 상호 작용
- 18
React 클래스에서 함수 구성 요소로 변환 한 후 검색 기능이 더 이상 작동하지 않습니다.
- 19
React Native : 클래스에서 함수 구성 요소 내부에있는 함수 호출
- 20
React Redux-useDispatch 대 클래스 구성 요소 및 mapStateToProps와 함께 기능 구성 요소 사용에 대한 혼란
- 21
클래스 구성 요소를 함수 구성 요소로 변환-스크롤 위치에 따라 헤더 확장 / 축소
- 22
React Native에서 한 함수 구성 요소의 상태를 다른 함수 구성 요소에서 변경하는 방법은 무엇입니까?
- 23
React를 사용하여 클래스 구성 요소에서 원하지 않는 상태 변경
- 24
하위 구성 요소의 상위 구성 요소 변수에 액세스 (ng-view 중첩 경로)
- 25
클래스 구성 요소를 후크로 변환하고 메서드를 자식 구성 요소에 전달
- 26
React 클래스 구성 요소 및 스타일 구성 요소와 함께 ref를 올바르게 사용하는 방법은 무엇입니까?
- 27
React에서 Context API 및 기능 구성 요소를 서비스로 사용
- 28
클래스 구성 요소를 기능 구성 요소로 변환
- 29
클래스 구성 요소를 기능 구성 요소로 변환
몇 마디 만하겠습니다