我想将动态pdf文件从BooksList组件传递到react-router-dom中的Link组件，以便当我单击Link内部的BooksList组件时，会将pdf文件传递给Link，然后Link会将这个pdf文件转发给PDFViewer组件该pdf文件将在何处呈现。如果不可能，请提出一些我可以用来实现此功能的方法。传递任何数据之前的代码示例如下：
<Link to="/pdf_viewer">
<BooksList></BooksList>
</Link>
<Route path="/pdf_viewer">
<PDFViewer></PDFViewer>
</Route>
图书清单
export class BooksList extends Component {
render() {
return this.props.books.map((book)=> (
//Here there is book info rendered from props
//PDF file is an attribute in book eg. book.pdf_file
<div>Title: {book.book_title}</div>
));
}
}
export default BooksList
PDF查看器
export class PDFViewer extends Component {
constructor(props){
super(props);
const { state: { pdfFile } } = this.props.location;
}
render() {
return (
<div key={book._id} className="pdfViewer">
<embed src={ `data:application/pdf;base64, ${this.state}` } width="100%" height="600px"></embed>
</div>
)
}
}
export default PDFViewerUnLinkedBooksList
export class UnLinkedBooksList extends Component {
viewPDFHandler = pdfFile => {
const {history} = this.props;
history.push({
pathname: "/pdfviewer",
state: {
pdfFile
}
});
}
render() {
return this.props.books.map((book)=> (
<div>
<button type="button" onClick={()=> this.viewPDFHandler(book.pdf_file_byte["$binary"])}>View PDF</button>
</div>
));
}
}
const BooksList = withRouter(UnLinkedBooksList);
export default UnLinkedBooksList应用程序
export class App extends Component {
state = {
books: []
}
componentDidMount(){
axios.get("http://127.0.0.1:5000/get_all_books").then(res=>this.setState({books:res.data.all_books}))
}
render() {
return (
<Router>
{/* Index Page */}
<Route exact path="/">
<div className="App">
<SearchBar></SearchBar>
<div className="row p-10">
<div className="col-lg-6">
<Link to="/pdf_viewer" className="text-decoration-none">
<BooksList books={this.state.books}></BooksList>
</Link>
</div>
</div>
</div>
</Route>
{/* PDF Viewer Page */}
<Route path="/pdf_viewer" className="text-decoration-none">
<PDFViewer></PDFViewer>
</Route>
</Router>
)
}
}
export default App将history对象从路由上下文公开，BooksList并为每个映射的书添加一个处理程序，以将PDF文件引用作为路由转换有效负载传递。由于BooksList是基于类的成分，不被渲染Roiute（它可能应该是，顺便说一句），使用withRouter高阶组件装饰和注射路线道具，（ ，history，）。locationmatch
class UnlinkedBooksList extends Component {
viewPdfHandler = pdfFile => {
const { history } = this.props;
history.push({
pathname: "/pdf_viewer",
state: {
pdfFile
}
});
};
render() {
return this.props.books.map((book)=> (
//Here there is book info rendered from props
//PDF file is an attribute in book eg. book.pdf_file
...
<button
type="button"
onClick={() => viewPdfHandler(book.pdf_file)}
>
View PDF
</button>
));
}
}
const BooksList = withRouter(UnlinkedBooksList);
export default BooksList;
在App中，默认导入BooksList，这是将具有location道具的链接组件。
import BooksList from './path/to/BooksList';
在接收端，您可以提取路由状态。PDFView在componentprop上渲染，以便它也接收路线prop，特别是，location它可以访问路线状态。
<Route path="/pdf_viewer" component={PDFViewer} />
在PDFViewer中，pdfFile从location对象进行访问：
const { state: { pdfFile } } = this.props.location;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句