如何在索引中传递变量.html以响应组件

Question

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

这是我想传递给"着陆"组件的变量这是"着陆.js"组件我想显示变量

Answer 1

在window对象中创建一个新属性，可能会window._DEFAULT_DATA并将来自 Django 的序列化数据传递给它。

在 HTML 中的 head 标记中

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

然后，当您想使用它时，只需使用JSON.parse即可拥有新的 JSON。

Answer 2

index.html：

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

反应组件：

let data = localStorage.getItem('data')