React.js中如何实现点击表格链接后在页面右侧动态展示PDF文件

核心逻辑是通过父组件维护选中PDF的状态，点击表格文件时更新状态，再将状态传递给PDF预览组件实现动态切换，具体修改如下： #

步骤1：修改父组件 DocumentList 逻辑 #

新增状态存储当前选中的PDF路径，抽离文档列表数据，将状态更新方法和数据传递给子组件：

import ViewPdf from '../../../components/ViewPdf'
import {Table,Col,Row,Button} from 'reactstrap'
import { useState } from 'react'

// 抽离文档列表数据，pdfPath对应你项目src下的PDF实际存储路径
const DOC_LIST = [
  {
    id: '1-86',
    name: '医疗保险理赔单',
    status: '已签署',
    pdfPath: '/src/pdf/medical-insurance-claim.pdf' // 替换为你实际的文件路径
  },
  {
    id: '0-34',
    name: '家庭保险单',
    status: '已签署',
    pdfPath: '/src/pdf/household-insurance.pdf' // 替换为你实际的文件路径
  },
  {
    id: '2-24',
    name: '车辆保险单',
    status: '未签署',
    pdfPath: '/src/pdf/car-insurance.pdf' // 替换为你实际的文件路径
  }
]

// DocTable组件接收两个props：文档列表、选中PDF的回调方法
const DocTable = ({ docList, onSelectPdf }) => {
  return (
    <>
      <span style={{ fontWeight: 'bold' }}>文档列表</span><br/>
    <Table bordered hover size="sm">
      <thead>
        <br/>
        <tr>
          <th>ID</th>
          <th>文档名称</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        {/* 遍历数据渲染表格 */}
        {docList.map(item => (
          <tr key={item.id}>
            <th scope="row">{item.id}</th>
            <td>
              <Button 
                color="link"
                onClick={() => onSelectPdf(item.pdfPath)}
              >
                {item.name}
              </Button>
            </td>
            <td>{item.status}</td>
          </tr>
        ))}
      </tbody>
    </Table>
    <br/>
    </>
  );
}

const DocumentList=()=>{
  // 新增状态：存储当前选中的PDF路径，默认可以传第一个或者空
  const [selectedPdf, setSelectedPdf] = useState(DOC_LIST[0].pdfPath)

  return (
    <div>
      <Row>
      <Col xs="6">
        <DocTable 
          docList={DOC_LIST} 
          onSelectPdf={(path) => setSelectedPdf(path)}
        />
      </Col>

      <Col xs="6">
        {/* 将选中的PDF路径传给预览组件 */}
        <ViewPdf pdfPath={selectedPdf}/>
      </Col>
    </Row>
    </div>
  );

}
export default DocumentList

步骤2：修改 ViewPdf 组件接收路径参数 #

找到你编写的ViewPdf组件，接收pdfPath的props，替换原来硬编码的文件路径即可，示例如下：

// ViewPdf组件示例修改，你只需要替换file属性的取值即可
import { Document, Page } from 'react-pdf';

const ViewPdf = ({ pdfPath }) => {
  // 其他原有逻辑保持不变
  return (
    <Document file={pdfPath}> {/* 这里原来写的固定路径替换成props传过来的pdfPath */}
      <Page pageNumber={1} />
      {/* 其他原有渲染逻辑保持不变 */}
    </Document>
  )
}
export default ViewPdf

修改完成后默认会展示第一个文档的预览内容，点击左侧表格的其他文档链接就会自动切换右侧的预览内容。

内容的提问来源于stack exchange，提问作者Mako88