从 React 组件加载 Django 静态文件

【问题标题】：Loading Django static files from React component从 React 组件加载 Django 静态文件
【发布时间】：2021-05-26 19:31:01
【问题描述】：

总的来说，我对 React/Django/web 开发还很陌生。我知道关于如何在 Django 模板中加载静态文件有很多关于 SO 的问题，但我找不到任何关于如何在 React 组件中执行此操作的有用信息。

场景：我正在构建一个 React-Django 应用程序，其中一项功能是根据一些用户输入呈现 PDF 文档。如果文件存储在 react 应用程序的源代码树中的某个位置，我可以使用 react-pdf 成功呈现 pdf。

但是，我想从后端提供这些 pdf 文件。目前，我有一个带有FilePathField 的 Django 模型，它指向这些 pdf 在我的文件系统上的位置。使用此文件路径在 React 中呈现 pdf 的最佳实践是什么？另外，这种方法是否正确？

【问题讨论】：

标签： reactjs django

【解决方案1】：

我让它在开发设置下工作。这是我遵循的步骤

首先，在项目级urls.py，将staticfiles_urlpatterns添加到urlpatterns

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

urlpatterns = [
    path('admin/', admin.site.urls),
    path('ml/', include('ml.urls'))
]

urlpatterns += staticfiles_urlpatterns()

其次，指定您的静态文件在settings.py 中的位置。就我而言，我将所有这些文件放在项目级别的 assets 文件夹中。

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'assets')

最后，我只是将静态 URL 作为响应（例如 /static/assets/sample.pdf）发送到可以呈现 pdf 的 react 组件。

欢迎在 cmets 中提供任何反馈。谢谢！

【讨论】：

非常感谢！！这是唯一对我有用的东西！