Mat*_*att 5 typescript reactjs create-react-app
我最近开始进行网络开发。我陷入了困境，这可能是一个微不足道的问题。我试图弄清楚如何将数据从动态创建的数据传递index.html到我的（打字稿）反应前端（通过创建create-react-app）。
假设我们有一个 Flask Web 服务器，当请求“/”资源时，它会收集一些初始用户数据，用它实例化一个页面模板并返回该页面：
# 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">
如何访问initial_data我的 React 组件？
编辑：如果这种从index.html（客户端连接时在后端创建的）传递某些内容到我的打字稿反应组件的模式有缺陷，那么我也会接受一个在这种情况下指出正确模式的答案。
类似的东西（显然只是编造，只是想说明我的意思）
initial_data 我接受一个答案，添加显示 1) 2) 3) 的一些示例代码
非常感谢您的帮助！
当您在 React 组件内传递全局变量时，使用对象传递它始终是更好的方法window。在这种情况下，您需要将其作为 传递window.initial_data。这通知 linter 并做出反应，它是一个全局变量。因为它没有在文件内定义。
| 归档时间： |
|
| 查看次数： |
3853 次 |
| 最近记录： |