如何将变量从index.html传递到React组件

Question

我正在使用Django和React制作一个项目。我从Django中获取Twitter API的数据，我想在前端展示这些数据。 我将数据作为Javascript变量从django views.py传递到index.html。然后，我想在Components文件夹中的Landing.js中显示它。我使用了React路由，Landing和Main页面是我目前正在路由的页面。我还没有弄清楚如何从单个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”组件

- user9626571

---

可以做到，但不要这样做 - React不是另一个模板引擎 - 让你的应用程序从API获取数据。 - xadm

我有同样的问题。你解决了吗？ - Anatol

Answer 1

在你的视图中，创建一个名为 window._DEFAULT_DATA 的新属性，并将Django中序列化的数据传递给它。

在HTML的头标签中：

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

当你想要使用它时，只需使用JSON.parse来创建一个新的JSON对象。

- mcssym

---

假设您想要访问数据中的“tweets”字段，则必须像这样解析： const data = JSON.parse(window._DEFAULT_DATA); 然后只需访问 data.tweets 即可。 - mcssym

尝试在设置后立即使用console.log(window._DEFAULT_DATA)以确保一切正常！！！ - mcssym

Answer 2

index.html:

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

React组件：

let data = localStorage.getItem('data')

- eaithy