用reactjs显示PDF文件

Question

我是新的反应，我正试图从存储在src目录内的PDF的可选链接列表中显示PDF。对于PDF查看，我使用了以下代码:https://npm.io/package/react-pdf

我的显示页面图像

所以我在屏幕的左边有一个小表格，如果我选择其中一个链接，它应该在屏幕的右边打开pdf。我只是把<ViewPdf/>函数与已经硬编码的pdf文件放在一起，这就是我在右侧显示它的方式。

我的问题是如何实现这样一种情况，我可以从表中单击链接，并在右侧显示文件。下面是我的代码:

import ViewPdf from '../../../components/ViewPdf'
import {Table,Col,Row,Button} from 'reactstrap'
const DocTable = () => {
return (
<>
<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">1-86</th>
<td><Button color="link">Medical Insurance Claim</Button></td>
<td>Signed</td>
</tr>
<tr>
<th scope="row">0-34</th>
<td><Button color="link">Household Insurance</Button></td>
<td>Signed</td>
</tr>
<tr>
<th scope="row">2-24</th>
<td><Button color="link">Car Insurance</Button></td>
<td>Not Signed</td>
</tr>
</tbody>
</Table>
<br/>
</>
);
}
const DocumentList=()=>{
return (
<div>
<Row>
<Col xs="6">
{DocTable()}
</Col>
<Col xs="6">
<ViewPdf/>
</Col>
</Row>
</div>
);

}
export default DocumentList

Answer 1

首先，您需要一个带有处理程序函数的按钮来在hide/show情况之间切换。此外，还需要一个状态变量来存储当前状态:

const DocTable = ({isVisible, onToggle}) => {
return (
<>
// ... rest of the codes
<button onClick={onToggle}>
{isVisible? "Hide" : "Show"}
</button>
// ... rest of the codes
</>
);
}

现在基本部分添加到DocTable组件，回到DocumentList组件并实现状态和处理程序:

import React, {useState} from 'react';
const DocumentList= () => {
const [isVisible, setIsVisible] = useState(false) // false to hide the PDF for the first time
const handleToggle = () => {
setIsVisible(prevState => !prevState)
}

return (
<div>
<Row>
<Col xs="6">
<DocTable isVisible={isVisible} onToggle={handleToggle}/>
</Col>
<Col xs="6">
{ isVisible && <ViewPdf/> }
</Col>
</Row>
</div>
);
}

现在，点击DocTable组件上的按钮，handleToggle函数将调用并改变isVisible的值，最后由isVisible变量决定是否显示ViewPdf组件。