将环境变量从 django 传递到 React 应用程序

Dmi*_*try 6 django reactjs

我想将一个变量从 django 传递到 React 应用程序。我知道我可以通过从 html 页面传递窗口对象来做到这一点,但我想知道是否可以使用环境变量来做到这一点。我遇到了这个链接How can I pass a variable from 'outside' to a React app? 其中提到使用.env文件。请告知如何将其与 Django/Python 设置一起使用。

tri*_*ixn 5

只需将其渲染到模板中的脚本标记中即可:

\n\n
<script type="text/javascript">\n    var globallyVisibleVar = {myVar}\n</script>\n
Run Code Online (Sandbox Code Playgroud)\n\n

但您必须确保该变量是 JSON 序列化的。您可以编写一个模板标签,也可以在将其传递到模板上下文之前对其进行 JSON 序列化。还要确保使用varand 不是constorlet因为它们是块作用域的并且不会在您的 React 应用程序中全局可见。

\n\n

正如 create-react-app 的文档所述:

\n\n
\n

环境变量是在构建时嵌入的。由于 Create React App 生成静态 HTML/CSS/JS 包,因此它可能无法在运行时读取它们。要在运行时读取它们,您需要将 HTML 加载到服务器上的内存中并在运行时替换占位符,就像此处所述。或者,您可以在更改应用程序时随时在服务器上重建应用程序。

\n
\n\n

由于您不想在每个请求上重新构建整个 JavaScript,因此您不能使用它在服务器应用程序 (Django) 和客户端应用程序 (react) 之间共享动态数据。

\n\n

因此,如果您点击链接,您将阅读以下内容:

\n\n
\n

将数据从服务器注入到页面中

\n\n

与上一节类似,您可以在 HTML 中保留一些占位符来注入全局变量,例如:

\n
\n\n
<!doctype html>\n<html lang="en">\n    <head>\n    <script>\n        window.SERVER_DATA = __SERVER_DATA__;\n    </script>\n
Run Code Online (Sandbox Code Playgroud)\n\n
\n

然后,在服务器上,您可以__SERVER_DATA__在发送响应之前替换为实际数据的 JSON。然后客户端代码可以读取并window.SERVER_DATA使用它。确保在将 JSON 发送到客户端之前对其进行清理,因为这会使您的应用程序容易受到 XSS\n 攻击

\n
\n