如何在不违反内联脚本CSP的情况下使用jinja2服务器端渲染

Question

我是React的新手并尝试了一下.我想在我使用Jinja2模板的Flask网站上使用它.

人们似乎建议首先在服务器端呈现数据,而不是总是在页面加载时对数据进行初始调用.我找到了这个nodejs示例,但它只是将页面上的数据放在内联脚本标记中的全局变量中.我想知道除了将页面上的数据放在内联脚本标记内之外是否还有一种干净的方法.由于我的安全CSP策略,我无法使用内联脚本或eval.

是否有人使用标准模式在服务器上为React呈现数据而不使用内联变量？

Answer 1

您当然可以在通过Jinja进行服务器端渲染的站点上使用它.问题变成了 - 你想在没有重新加载的情况下在页面上更新什么？通常,React中的组件状态通过用户交互或更改数据源(即db API)进行更新.

我的经验是渲染(通过Jinja)静态页面数据,然后使用React组件更新基于和/或监听API状态的更改(可能通过Flask-Restful).可以通过React的生命周期方法(通常是'getInitialState'或'setState')访问这些API

例如,您可能有部分站点在服务器端呈现layout.html,然后{% block content %}由React js组件呈现客户端.

{% extends "layout.html" %}


{% block content %}

<h2>Some Header</h2>

<script type="text/jsx" src="/scripts/ReactComponent1.js">
</script>

<div id="one">
<!-- This element's contents will be replaced with ReactComponent1. -   ->
</div>

<script type="text/jsx" src="/scripts/ReactComponent2.js">
</script>

<div id="two">
<!-- This element's contents will be replaced with ReactComponent2. -->
</div>



{% endblock %}

我真的建议您阅读React Tutorial并尝试将其应用于Flask应用程序.