时间戳

首页 > 解决方案 > 如何使用 Python Tornado 模板渲染 React 组件？

javascript - 如何使用 Python Tornado 模板渲染 React 组件？

问题描述

我正在尝试在JupyterLab中修改登录页面 UI（使用React），它的服务器似乎由 Python Tornado组成并呈现为模板之一。（字面上存储在模板目录中。 ）它也可能分别根据上下文呈现其他类似的。login.html...jupyter_server\templates\404.htmlerror.html

我只是按照https://reactjs.org/docs/add-react-to-a-website.html如下所示：

page.html

<head>
    
    <meta charset="utf-8">

    <title>{% block title %}Jupyter Server{% endblock %}</title>
                                           :
                                           :
                                          
    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    {% block login %}  
    {% endblock login %}
  
</body>

</html>

登录.html

{% extends "page.html" %}

{% block login %}
    <script src="like_button.js"></script>
    <script>console.log('This is Login page.')</srcipt> // logs shows fine
    <h1>This is Login Page.</h1> // tag shows fine  
{% endblock login %}

据我所知，当 url 作为登录名时，login.html将其内容附加到page.html.

我期待like_button.js组件渲染得很好，但它是唯一被排除在外的东西。同时日志和h1正确可见。

我错过了什么吗？欢迎任何想法。

标签： javascriptpythonreactjstornadojupyter-lab

解决方案

src脚本不正确。在 Tornado 中，您将静态文件放在一个名为的文件夹中static，然后进行src如下设置：

<script src="{{ static_url('like_button.js')"></script>

如果您将文件放在子文件夹中，例如static/js/，则提供其相对路径：

<script src="{{ static('js/like_button.js') }}"></script>

推荐阅读