Question

我最近开始进行Web开发。我被困在某事上，这可能是一个微不足道的问题。我试图弄清楚如何将数据从动态创建的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>

当我们现在启动Web服务器并打开浏览器以导航到该页面时，可以看到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（当客户端连接时在后端创建的东西）传递到我的打字稿反应组件的方式存在缺陷，那么我也将接受在这种情况下，我的答案指向正确的模式。

（显然只是在虚张声势，只是想说明我的意思）

定义一个打字稿数据类型，该数据类型存储可以从所有组件访问的用户数据
在您的主要react组件中使用生命周期方法（例如'componendDidMount'）将请求发送到后端以获取initial_data
回复返回时，将其存储在1）

我接受一个答案，该答案添加了1）2）3）的示例代码。

非常感谢您的帮助！

Answer 1

当您在react组件内传递全局变量时，使用通过window对象传递它总是更好的样式。在这种情况下，您需要将其作为window.initial_data传递。这会通知linter并做出反应，它是一个全局变量。由于未在文件中定义。

传递来自index.html的数据以响应组件

1 个答案: