Flask Jinjia2 与 react

Jinjia2

这是flask使用的模板工具，利用render_template方法可以方便的将后端的数据传给前端。

但是如果要使用react呢。

我如果在jsx中直接使用{{}}是不能输出变量的。

然后我在quora上面看到了别人的方法：就是将reactDom的render方法暴露给html中的js代码。

index.html：

<script type="text/javascript">
    show_user_info("{{ user_name or ''}}", "{{ department or '' }}", "{{ company or '' }}");
</script>

那么上面的show_user_info是在哪里定义的呢？

在index.tsx中，

function show_user_info(username: string, department: string, company: string) {
    ReactDOM.render();
};
(window as any).show_user_info = show_user_info;

将ReactDOM.render()方法封装一下，传给window对象。

需要注意的就是在typescript中window对象是不能直接增加属性的。而且在tsx文件中的声明也是不能使用的，所以要用as any。

具体webpack+react的环境搭建参考文档