【发布时间】：2019-08-10 21:20:49
【问题描述】：
我最近开始了 Web 开发。我被困在这可能是一个微不足道的问题。我试图弄清楚如何将数据从动态创建的index.html 传递到我的（打字稿）反应前端（通过create-react-app 创建）。
假设我们有一个烧瓶网络服务器，当请求“/”资源时，它会收集一些初始用户数据，用它实例化一个页面模板并返回该页面：
# flask webserver
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route('/')
def index():
initial_user_data = {"foo":"bar",
"baz":"biz"}
return render_template('index.html', initial_data=initial_user_data)
if __name__ == '__main__':
app.run(debug=True)
为简单起见，initial_user_data 在此处存储硬编码数据。在我的实际用例中，字典中填充了从文件等读取的各种特定于用户的数据项。
接下来，假设index.html 使用initial_data。
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>React App</title>
</head>
<body>
<script>
initial_data = {{initial_data | tojson}}
console.log(initial_data)
</script>
<div id="root"></div>
...
</body>
</html>
当我们现在启动网络服务器并打开浏览器导航到页面的时候可以看到initial_data被记录到浏览器的控制台输出。到目前为止，一切顺利。
现在我的问题是：如何将initial_data 传递给我的（打字稿）反应组件？从概念上讲，我想做这样的事情：
// App.tsx
import React from 'react';
const App: React.FC = () => {
// make use of 'initial_data'
const init_data = initial_data;
return (
<div ...
</div>
);
}
但是yarn build会给我
Cannot find name 'initial_data'. TS2304
4 |
5 | const App: React.FC = () => {
> 6 | const init_data = initial_data;
| ^
7 | return (
8 | <div className="App">
9 | <header className="App-header">
如何让我的 react 组件可以访问 initial_data？
编辑：如果这种将index.html（客户端连接时在后端创建）传递给我的打字稿反应组件的模式存在缺陷，那么我也会接受答案在这种情况下，这为我指出了正确的模式。
类似的东西（显然只是编造，只是想说明我的意思）
- 定义一个 typescript 数据类型，用于存储可以从所有组件访问的用户数据
- 在您的主要反应组件中，使用诸如“componendDidMount”之类的生命周期方法向后端发送请求以获取
initial_data - 当响应返回时，将其存储在 1)中
我会接受添加显示一些示例代码的答案 1) 2) 3)
非常感谢您的帮助！
【问题讨论】：
-
initial_data 是全局变量吗？
-
为什么在你的 html 页面中动态地做任何事情，而不是通过一个响应 json 的端点传递数据？
-
@azium 感谢您的评论。我投了赞成票。你能给我一些示例代码吗？我不明白你的意思。请注意，我刚刚开始使用网络开发。
-
@azium 您是否建议在页面加载后对 API 执行 get/post 请求？
-
@azium 您是否建议在页面加载后点击 API 来加载数据？
标签： reactjs typescript create-react-app