[英]How can we fetch a prop from the component that we are using? (React)
First of all, I am not using React-Redux
. 首先,我没有使用
React-Redux
。 I know it would help, but it would take too long for my team to make a transition. 我知道这会有所帮助,但是我的团队过渡需要很长时间。 So, please understand that I need a solution without
React-Redux
. 所以,请理解我需要一个没有
React-Redux
的解决方案。
What I am trying to do is, I am building a PDF extractor. 我想做的是,我正在构建PDF提取器。 I want a user to select a page of a PDF that he/she wants to extract.
我希望用户选择他/她想要提取的PDF页面。
I have a component called PDFViewer
which does the rendering work. 我有一个名为
PDFViewer
的组件,它负责渲染工作。
PDFViewer PDF查看器
renderPdf() {
const {pdf, pageNo} = this.state
const container = document.getElementById('container')
if(this.props.selectedPage){
console.log('selectedPage exists', this.props.selectedPage)
pdf.getPage(this.props.selectedPage).then((page) => {
const scale = this.calcScale(page)
const viewport = page.getViewport(scale)
const div = document.createElement('div')
// Set id attribute with page-#{pdf_page_number} format
div.setAttribute('id', `page-${(page.pageIndex + 1)}`)
div.style.width = `${viewport.width}px`
div.style.height = `${viewport.height}px`
page
.getOperatorList()
.then((opList) => {
const svgGfx = new window.PDFJS.SVGGraphics(
page.commonObjs,
page.objs
)
return svgGfx.getSVG(opList, viewport)
})
.then((svg) => {
// If there's already rendered page, delete it.
if (container.childNodes.length > 0) {
container.removeChild(container.childNodes[0])
}
container.appendChild(svg)
return svg
})
})
} else {
console.log('props', this.props)
pdf.getPage(pageNo).then((page) => {
const scale = this.calcScale(page)
const viewport = page.getViewport(scale)
const div = document.createElement('div')
// Set id attribute with page-#{pdf_page_number} format
div.setAttribute('id', `page-${(page.pageIndex + 1)}`)
div.style.width = `${viewport.width}px`
div.style.height = `${viewport.height}px`
page
.getOperatorList()
.then((opList) => {
const svgGfx = new window.PDFJS.SVGGraphics(
page.commonObjs,
page.objs
)
return svgGfx.getSVG(opList, viewport)
})
.then((svg) => {
// If there's already rendered page, delete it.
if (container.childNodes.length > 0) {
container.removeChild(container.childNodes[0])
}
container.appendChild(svg)
return svg
})
})
}
}
render() {
const {pdf, pageNo} = this.state
const {showPagination} = this.props
return (
<div>
{showPagination && (
<PageTurner
nextPage={this.nextPage}
previousPage={this.previousPage}
pageNo={pageNo}
numPages={pdf ? pdf.numPages : 0}
/>
)}
<div id="container" />
</div>
)
The PageTurner
in render just makes the user selects the page that one wants to render. 渲染中的
PageTurner
仅使用户选择一个要渲染的页面。 renderPdf()
is in charge of rendering it. renderPdf()
负责渲染它。
NextComponent NextComponent
render() {
const tableStyle = this.getTableStyle();
const tableSettings = this.getTableSettings();
return (
<div>
{//<ReferenceMenu />
}
<div
style={sideBySide}>
<PDFViewer
paginationCallback={this.handlePageChange}
pdfData={this.state.pdfData}
desiredWidth={600}
selectedPage={2}
/>
<TablePosition
style={tables}
step={this.props.step}
pdfData={this.props.pdfData}
tableSettings={tableSettings}
tableStyle={tableStyle}
fileName={this.state.fileName}
tableSize={this.getTableSize()}
tableOffset={this.state.tableOffset}
desiredWidth={700}
updateXOffset={x => this.updateXOffset(x)}
updateYOffset={y => this.updateYOffset(y)}
markTable={() => this.markTable()}
setOutputLabels={(row, col, val) => this.setOuputLabels(row, col, val)}
/>
</div>
</div>
);
}
In my next component, it tries to render the page of the selected PDF page and align with the table that the PDF page has (the table part is not important in this question). 在我的下一个组件中,它尝试呈现所选PDF页面的页面并与PDF页面具有的表对齐(表部分在此问题中并不重要)。
As you can see, I sent selectedPage={2}
as a prop to the PDFViewer
and this successfully renders the 2nd page of the PDF. 如您所见,我将
selectedPage={2}
作为prop发送给PDFViewer
,这成功地呈现了PDF的第二页。 But the value is hard coded. 但是该值是硬编码的。
My question is, how can I fetch the page number selected in PDFViewer
( this.state.pageNo
in PDFViewer
) and use it in the selectedPage={ HERE }
? 我的问题是,如何获取在
PDFViewer
选择的页码(在PDFViewer
this.state.pageNo
)并在selectedPage={ HERE }
使用它?
Please help 请帮忙
I took my simple example from the comments and substituted in your component names to give you a better idea of how to lift the state up the component tree. 我从注释中提取了一个简单的示例,并替换了您的组件名称,以使您更好地了解如何将状态提升到组件树。 I tried to base the flow on what I could gather from the context of your problem.
我试图根据从问题的背景中可以收集到的信息来确定流程。 Again, I would recommend reading React's article Lifting State Up .
同样,我建议阅读React的文章Lifting State Up 。
const PageTurner = ({ onConfirm, onPageChange, pageNo }) => ( <div> <button type="button" onClick={() => onPageChange(pageNo - 1)}> Prev ({pageNo - 1}) </button> <button type="button" onClick={() => onPageChange(pageNo + 1)}> Next ({pageNo + 1}) </button> <button type="button" onClick={onConfirm}> Confirm </button> </div> ); const PdfViewer = ({ pageNo }) => ( <div> <h1>PdfViewer</h1> <h2>Current Page is {pageNo}</h2> </div> ); const Step1 = ({ onConfirm, onPageChange, pageNo }) => ( <div> <PdfViewer pageNo={pageNo} /> <PageTurner onConfirm={onConfirm} onPageChange={onPageChange} pageNo={pageNo} /> </div> ); const NextComponent = ({ pageNo }) => ( <div> <h1>NextComponent</h1> <label>Page number is {pageNo}</label> </div> ); class App extends React.Component { constructor(props, context) { super(props, context); this.state = { pageNo: 1, step: 1 }; this.handleConfirm = this.handleConfirm.bind(this); this.handlePageChange = this.handlePageChange.bind(this); } handleConfirm() { this.setState({ step: 2 }); } handlePageChange(pageNo) { this.setState(state => ({ pageNo })); } render() { const { pageNo, step } = this.state; return ( <div> {step === 1 && ( <Step1 onConfirm={this.handleConfirm} onPageChange={this.handlePageChange} pageNo={pageNo} /> )} {step === 2 && <NextComponent pageNo={pageNo} />} </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.