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

小编典典

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

reactjs

我是React的新手，正在尝试一下。我想在使用Jinja2模板的Flask网站上使用它。

人们似乎建议先在服务器端呈现数据，而不必总是在页面加载时对数据进行初始调用。我找到了这个nodejs示例，但它只是将数据放在页面上的内联脚本标签中的全局变量中。我想知道是否有一种干净的方法可以做到这一点，而不仅仅是将数据放在页面上的内联脚本标签中。由于我采用了安全的CSP策略，因此无法使用内联脚本或eval。

人们是否使用标准模式来在服务器上为React渲染数据而无需使用内联变量？

阅读 240

2020-07-22

共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教程，并尝试将其应用于Flask应用程序。

2020-07-22