时间戳

首页 > 解决方案 > 在 reactjs 中显示多个 PDF 文件

javascript - 在 reactjs 中显示多个 PDF 文件

问题描述

我是新来的反应，我有多个 pdf，我试图根据选择的链接显示。我已经设法从存储在 src 目录中的我的 PDF 的可选链接列表中显示一个 PDF。但是，所有链接都会出现相同的 pdf。当我尝试显示不同的 pdf 时，出现此错误：

（TypeError：无法读取 null 的属性（读取“onToggle”））.

对于 PDF 查看，我使用了这里的代码：

https://npm.io/package/react-pdf

我的问题是如何实现这种情况，根据我点击的链接，我可以显示不同的 pdf。

我根据链接显示 pdf 的代码如下所示：

import React, { Component, useState } from "react";
import { Document, Page } from "react-pdf";
import myPdf from '../../../components/pdf/signed.pdf'
import ViewPdf from '../../../components/ViewPdf'
import ViewSecondPdf from '../../../components/ViewPdf2'
import ViewThirdPdf from '../../../components/ViewPdf3'
import AllPages from "src/components/pdf/AllPages";
import { Table, Col, Row, Button } from 'reactstrap'
import { Link } from "react-router-dom";

const Display = (props) => {
  <div>
    <AllPages pdf={props} />
  </div>
}

const DocTable = ({ onToggle }) => {
  return (
    <>
      <Link to="/sign" className="mb-2"><span className="material-icons">keyboard_backspace</span></Link><br />
      <span style={{ fontWeight: 'bold' }}>Documents</span><br />
      <Table bordered hover size="sm">
        <thead>
          <br />
          <tr>
            <th>ID</th>
            <th>Document Name</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">001</th>
            <td><Button id="MICButton" name="MICButton" color="link" onClick={onToggle}>Vehicle Insurance Claim</Button></td>
            <td>Signed</td>
          </tr>
          <tr>
            <th scope="row">002</th>
            <td><Button id="HIButton" name="HIButton" color="link" onClick={onToggle}>Household Insurance Contract</Button></td>
            <td>Signed</td>
          </tr>
          <tr>
            <th scope="row">003</th>
            <td><Button id="CIButton" name="CIButton" color="link" onClick={onToggle}>Vehicle Insurance Contract</Button></td>
            <td>Not Signed</td>
          </tr>
        </tbody>
      </Table>
      <br />
    </>
  );
}

const DocumentList = () => {
  const [isVisible, setIsVisible] = useState(false) // false to hide the PDF for the first time

  const handleToggle = () => {
    setIsVisible(prevState => !prevState)
  }

  if(document.getElementById('MICButton').onToggle == true){
    return (
      <div>
        <Row>
          <Col xs="6">
            <DocTable isVisible={isVisible} onToggle={handleToggle} />
          </Col>

          <Col xs="6">
              {isVisible && <ViewPdf />}
          </Col>
        </Row>
      </div>
    );
  }


  if(document.getElementById('HIButton').onToggle == true){
    return (
      <div>
        <Row>
          <Col xs="6">
            <DocTable isVisible={isVisible} onToggle={handleToggle} />
          </Col>

          <Col xs="6">
              {isVisible && <ViewSecondPdf />}
          </Col>
        </Row>
      </div>
    );
  }


  if(document.getElementById('CIButton').onToggle == true){
    return (
      <div>
        <Row>
          <Col xs="6">
            <DocTable isVisible={isVisible} onToggle={handleToggle} />
          </Col>

          <Col xs="6">
              {isVisible && <ViewThirdPdf />}
          </Col>
        </Row>
      </div>
    );
  }
  

}
export default DocumentList

这是我的桌子没有错误的图像。

标签： javascriptreactjsreact-pdf

解决方案

您可以将 PDF ID 传递给 onToggle，然后根据它显示所需的组件

const DocTable = ({ onToggle }) => {
    return (
        <>
            <Link to="/sign" className="mb-2">
                <span className="material-icons">keyboard_backspace</span>
            </Link>
            <br />
            <span style={{ fontWeight: 'bold' }}>Documents</span>
            <br />
            <Table bordered hover size="sm">
                <thead>
                    <br />
                    <tr>
                        <th>ID</th>
                        <th>Document Name</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">001</th>
                        <td>
                            <Button id="MICButton" name="MICButton" color="link" onClick={() => onToggle('MICButton')}>
                                Vehicle Insurance Claim
                            </Button>
                        </td>
                        <td>Signed</td>
                    </tr>
                    <tr>
                        <th scope="row">002</th>
                        <td>
                            <Button id="HIButton" name="HIButton" color="link" onClick={() => onToggle('HIButton')}>
                                Household Insurance Contract
                            </Button>
                        </td>
                        <td>Signed</td>
                    </tr>
                    <tr>
                        <th scope="row">003</th>
                        <td>
                            <Button id="CIButton" name="CIButton" color="link" onClick={() => onToggle('CIButton')}>
                                Vehicle Insurance Contract
                            </Button>
                        </td>
                        <td>Not Signed</td>
                    </tr>
                </tbody>
            </Table>
            <br />
        </>
    );
};

const DocumentList = () => {
    const [isVisible, setIsVisible] = useState(false); // false to hide the PDF for the first time
    const [activeDoc, setActiveDoc] = useState(null);

    const handleToggle = (docID) => {
        setIsVisible((prevState) => !prevState);
        setActiveDoc(docID);
    };
    return (
        <div>
            <Row>
                <Col xs="6">
                    <DocTable isVisible={isVisible} onToggle={handleToggle} />
                </Col>
                <Col xs="6">
                    {(() => {
                        if(!isVisible){
                            return null
                        }
                        switch (activeDoc) {
                            case 'MICButton':
                                return <ViewPdf />;
                            case 'HIButton':
                                return <ViewSecondPdf />;
                            case 'CIButton':
                                return <ViewThirdPdf />;
                            default:
                                return null;
                        }
                    })()}
                </Col>
            </Row>
        </div>
    );
};

推荐阅读