如何在 index.html 中傳遞變量以響應組件

Question

我正在使用 Django 和 React 制作一個項目。 我從 Django 的 Twitter API 獲取數據，我想在前端顯示數據。 我將 django views.py 中的數據作為 javascript 變量傳遞給 index.html。 然后我想在 Components 文件夾中的 Landing.js 中展示它。 我使用了 React 路由器，我的 Landing 和 Main page 是我目前路由到的頁面。 我還沒有弄清楚如何將數據從單個 html 文件傳遞​​到 React 中的 Javascript 組件

提前致謝

 <!-- index.html --> <section class="section"> <div class="container"> <div id="app" class="columns"><!-- React --></div> </div> </section> <script type="text/javascript"> window.myVar = "{{context.near.text}}"; //data can be passed from the Django.views.py </script> {% load static %} <script src="{% static 'frontend/main.js' %}"></script>

 //Landing.js js components import React, { Component } from 'react'; class Landing extends Component { componentDidMount() { console.log(window.myVar); //undefined console.log(this.myVVar); //undefined } render(){ return ( <div> </div> ) } } export default Landing;

這是我的樹結構

這是我從 Django views.py 傳遞的上下文

這是我要傳遞給“LANDING”組件的變量這是“Landing.js”組件我要顯示變量

Answer 1

在window對象（可能是window._DEFAULT_DATA創建一個新屬性，並將其傳遞給Django中您視圖中的序列化數據。

在HTML的head標簽中

<script>
    window._DEFAULT_DATA = 'Data parsed in string'
 </script>

然后，當您要使用它時，只需使用JSON.parse即可擁有一個新的JSON。

Answer 2

索引.html：

<script>
localStorage.setItem('data', data)
</script>

反應組件：

let data = localStorage.getItem('data')