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

Question

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

logint.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 同时正确可见。

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

Answer 1

脚本的 src 不正确。在 Tornado 中，您将静态文件放在名为 static 的文件夹中，然后像这样设置 src：

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

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

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

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

How to render a React component with Python Tornado template?

javascript

python

tornado

reactjs

jupyter-lab