如何将Flask环境变量传递至作为JS插件使用的React组件？

下面是几种直接可行的方案，无需让React接管整个路由或状态管理，完全把React当插件用：

方法1：通过DOM元素的data属性传递 #

这是最直观的方式，把需要的变量挂载到React要渲染的容器元素上：

1. 在Flask模板中，给React挂载的DIV添加data-*属性：

<div id="react-component-container"
     data-username="{{ current_user.username }}"
     data-api-token="{{ query_token }}">
</div>

2. 在React组件的入口文件中，读取这些属性：

const container = document.getElementById('react-component-container');
// 从dataset里提取变量
const props = {
  username: container.dataset.username,
  apiToken: container.dataset.apiToken
};

// 渲染组件时传入这些变量
ReactDOM.render(<MyDynamicComponent {...props} />, container);

方法2：通过全局window变量传递 #

在引入React构建文件前，先在Flask模板中定义全局变量，让React直接读取：

1. Flask模板中添加内联脚本：

<script>
  // 这里用tojson过滤器确保变量转义安全，避免XSS
  window.flaskContext = {{ flask_context_data|tojson }};
</script>
<!-- 然后引入React的构建JS文件 -->
<script src="{{ url_for('static', filename='react-build/main.js') }}"></script>

其中flask_context_data是你在Flask视图函数中传入模板的字典，比如：

return render_template('page.html', flask_context_data={
    'username': current_user.username,
    'token': query_token
})

2. React中直接访问全局变量：

const { username, token } = window.flaskContext;

function MyDynamicComponent() {
  return (
    <div>
      <p>当前用户：{username}</p>
      <p>API令牌：{token}</p>
    </div>
  );
}

方法3：给React组件暴露初始化接口 #

如果你的React组件是独立打包的，可以让它暴露一个初始化函数，直接接收Flask传递的参数：

1. 配置React的打包工具（比如Webpack），将组件打包为UMD模块，确保可以在全局访问：

// webpack.config.js 示例配置
module.exports = {
  output: {
    filename: 'my-component.js',
    library: 'MyReactComponent',
    libraryTarget: 'umd',
    globalObject: 'this'
  }
};

2. 在React组件中导出初始化函数：

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

export function init(options) {
  const { container, username, token } = options;
  ReactDOM.render(<MyComponent username={username} token={token} />, container);
}

3. 在Flask模板中调用初始化函数并传参：

<script src="{{ url_for('static', filename='react-build/my-component.js') }}"></script>
<script>
  MyReactComponent.init({
    container: document.getElementById('react-component-container'),
    username: "{{ current_user.username }}",
    token: "{{ query_token }}"
  });
</script>

注意事项 #

• 所有从Flask传递的变量，建议使用Jinja2的|tojson过滤器，它会自动处理转义，避免XSS攻击和语法错误。
• 如果变量包含敏感信息（比如令牌），确保页面是HTTPS传输，避免明文泄露。

内容的提问来源于stack exchange，提问作者pablo Parra