react如何打开一个静态文件
在React中打开静态文件的方法
React项目中静态文件通常存放在public目录下，可以通过以下方式访问：
将需要打开的静态文件（如PDF、图片等）放入项目的public文件夹中。假设文件名为example.pdf，路径为public/files/example.pdf。
// 使用a标签直接链接到public目录下的文件
<a href="/files/example.pdf" target="_blank" rel="noopener noreferrer">
打开PDF文件
</a>使用React Router导航到静态文件
如果项目使用了React Router，可以通过Link组件导航到静态文件：
import { Link } from 'react-router-dom';
<Link to="/files/example.pdf" target="_blank">
查看PDF文档
</Link>通过JavaScript动态打开静态文件
需要动态决定打开哪个文件时，可以使用JavaScript代码：
const openStaticFile = (filename) => {
window.open(`/files/${filename}`, '_blank');
};
// 调用示例
<button onClick={() => openStaticFile('example.pdf')}>
打开文件
</button>处理开发和生产环境的路径问题
为确保在不同环境下路径都能正确工作，可以创建环境变量：
const fileUrl = process.env.PUBLIC_URL + '/files/example.pdf';
<a href={fileUrl} target="_blank">
打开文件
</a>注意事项
静态文件应始终放在public目录而非src目录，这样构建时文件会被直接复制到输出目录而不经过webpack处理。
对于较大的静态文件，考虑使用CDN或外部存储服务而非打包到项目中。
