Javascript 我们如何从正在使用的组件中获取道具？（反应）

首先，我没有使用

React-Redux

。我知道这会有帮助，但我的团队需要很长时间才能完成转型。因此，请理解，我需要一个没有

React Redux

的解决方案

我想做的是，我正在构建一个PDF提取器。我希望用户选择他/她想要提取的PDF页面

我有一个名为

PDFViewer

的组件，它负责渲染工作

PDFViewer

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

在我的下一个组件中，它尝试呈现所选PDF页面的页面，并与PDF页面的表对齐（在这个问题中，表部分并不重要）

如您所见，我将

selectedPage={2}

作为道具发送到

PDFViewer

并成功呈现PDF的第二页。但该值是硬编码的

我的问题是，如何获取在

PDFViewer

中选择的页码（

this.state.pageNo

在

PDFViewer

中），并在

selectedPage={HERE}

中使用它

---

请帮助

我从注释中选取了我的简单示例，并将其替换为组件名称，以便更好地了解如何将状态提升到组件树中。我试图将流程建立在从您的问题背景中收集到的信息的基础上。再次，我建议阅读React的文章

constpageturner=（{onConfirm，onPageChange，pageNo}）=>(
onPageChange（第1页）}>
Prev（{pageNo-1}）
onPageChange（pageNo+1）}>
下一个（{pageNo+1}）
证实
);
const PdfViewer=（{pageNo}）=>(
PdfViewer
当前页面为{pageNo}
);
const Step1=（{onConfirm，onPageChange，pageNo}）=>(
);
常量NextComponent=（{pageNo}）=>(
下一个组件
页码为{pageNo}
);
类应用程序扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
页码：1，
步骤：1
};
this.handleConfirm=this.handleConfirm.bind（this）；
this.handlePageChange=this.handlePageChange.bind（this）；
}
handleConfirm（）{
这是我的国家({
步骤：2
});
}
handlePageChange（页码）{
this.setState（state=>({
页码
}));
}
render（）{
const{pageNo，step}=this.state；
返回(
{步骤===1&&(
)}
{步骤===2&&}
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）

什么是下一个组件？是PageTurner吗？我想如果您能提供更多的代码，级别高于
NextComponent
和
PageTurner
，这会很有帮助。您可能需要将所选页面保持在最接近的公共父级状态，根据
PageTurner
中的事件处理程序进行更新，然后通过props将其传递到
NextComponent
。@Firanolfind NextComponent不是PageTurner，这只是一个单独的页面，我试图呈现所选的PDF页面。@泰勒，如果这些组件没有共同的父级，该怎么办？我想我需要的是一种将道具传递给父组件的方法。公共父组件不必是直接的父组件，但如果它们位于同一个React应用程序中，即使是根组件，它们也必须有一个共同的祖先。您需要将道具传递给父组件，这是正确的。实现这一点的方法是通过事件处理程序。我在这里写了一个简单的例子。
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>
    );
}