Flask：将服务器上的Python变量传递给React组件

Question

我正在this repo练习Flask + React。

我目前有同样的问题， 我无法通过props将Flask中的变量传递给React组件。 我找到this older post，但它没有提供更多见解。

我的代码归结为：

server.py

def index():
return render_template('index.html', bar='hello')

index.jsx

ReactDOM.render(<App foo={ bar } />, document.getElementById('content'));

控制台错误

index.jsx?3769:5 Uncaught ReferenceError: bar is not defined

将信息从服务器传递到组件的适当方法是什么？

非常感谢您提前

更新

我想出了一个解决方案，这里是the changes。

这是＆＃34;苏格兰威士忌＆＃34;传递数据的方式？还是那就好了？

Answer 1

您的问题是您正试图直接从您的JavaScript代码访问模板变量。你不能直接访问。

有多种方法可以将变量从html模板传递到React DOM。您可以使用以下两个选项：

在模板index.html中，变量栏通过属性：

<div id="content" data-foo={bar}></div> <script> window.test = { bar }; // the variable bar passed in a script tag </script>

index.jsx中的

：

ReactDOM.render( <App{...(content.dataset)} test={test}/>, document.getElementById('content') );

这是一个jsfiddle，其中包含jsfiddle

中的代码示例