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 App。

Answer 2

将它放在将挂载组件（或您可以找到的任何其他元素）的 element 上的数据属性中：

<div id="one" data-component-initial="{}">
</div>

然后在您的 React 脚本中，使用此数据来呈现组件而不是 ajax 调用。

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

2 个答案: