使用React和Jinja2渲染CSS

Question

我有一个由React渲染的Jinja2静态模板，该模板通过单击url_for()指向第二个渲染视图：

menu.jsx （反应）

render(){
  const menuHtml = this.state.menu_template;
  const menu_template = { __html: menuHtml };
  return (
     <div id="parent">
      <div dangerouslySetInnerHTML={menu_template}/>
    </div>
  );       
}
}

menu.html （由上面的React dangerouslySetInnerHTML渲染）

<li><a href="{{ url_for('loading', name=item1)}}";</a>
<li><a href="{{ url_for('loading', name=item2)}}";</a>
(...)

依次指向另一个动画模板，该模板等待单击后完成任务，然后将应用重定向到第三个端点，例如：

loading.html （在后端呈现）

<div class="cup">
  <div class="coffee"></div>
</div>
<div class="smoke"></div>
<p class="txt">Brewing..<br><small></small></p>

<script> window.location.replace('/item/{{name}}');
</script>

CSS并不是以这种方式呈现的。

---

到目前为止，使用Jinja2将语法{% include %}链接到我的应用程序是在React中注入CSS的唯一方法，因为我无法直接通过<link type="text/css" href="{{url_for('static', filename='css/mug.css')}}">或<link href="%PUBLIC_URL%/mug.css" rel="stylesheet" />链接和注入CSS。 ，对此。

因此，如果我将其放在menu.html的顶部：

{% include 'gifs/brewing.html' %}

它可以正常渲染CSS（请记住，menu.html已完全用dangerouslySetInnerHTML渲染），但这是渲染页面的错误页面，我需要将其渲染，只需单击将应用程序重定向到{{ 1}}，在该页面内，这里：

loading.html

如果将<a href="{{ url_for('loading', name=item1)}}";</a> 放在{% include 'gifs/brewing.html'%}的顶部，则会创建无限循环。

如何管理此CSS？