ReactPy默认标题为'ReactPy'，自定义标题求助：html.title设置无效

你遇到的问题本质是：ReactPy会把组件返回的内容渲染到页面的<body>标签内，而<title>标签必须放在<head>中才会被浏览器识别，所以直接在组件里返回html.title()不会生效。

下面给两种可行的解决方式：

1. 全局静态设置标题 #

如果你的页面标题是固定不变的，可以在启动应用前通过configure方法配置页面元数据，直接指定标题：

from reactpy import configure, run, component, html

# 配置页面标题
configure(meta_tags=[{"property": "og:title", "content": "raspberry pi temperature monitor"}])

@component
def App():
    temps_list = read_last10('pi_temp.txt')
    return html._(
        html.h1("raspberry"),
        html.img({
            "src": "https://cdn.pixabay.com/photo/2016/11/27/21/42/stock-1863880_1280.jpg",
            "style": {"width": "10%", "margin_left": "0%"},
        }),
        DataList(temps_list),
        html.p(f'cpu load: {load_avg}'),
        html.p(f'uptime: {GetTime()}'),
    )

run(App)

2. 动态设置标题（支持组件内更新） #

如果需要根据组件状态动态修改标题，可以使用use_effect钩子配合原生JS的document.title来实现：

from reactpy import component, html, use_effect

@component
def App():
    temps_list = read_last10('pi_temp.txt')
    
    # 组件挂载时设置标题，依赖项为空数组表示只执行一次
    use_effect(
        lambda: setattr(document, "title", "raspberry pi temperature monitor"),
        []
    )
    
    return html._(
        html.h1("raspberry"),
        html.img({
            "src": "https://cdn.pixabay.com/photo/2016/11/27/21/42/stock-1863880_1280.jpg",
            "style": {"width": "10%", "margin_left": "0%"},
        }),
        DataList(temps_list),
        html.p(f'cpu load: {load_avg}'),
        html.p(f'uptime: {GetTime()}'),
    )

如果需要根据组件内的变量动态更新标题，只需要把变量加入use_effect的依赖数组即可，比如：

use_effect(
    lambda: setattr(document, "title", f"当前温度: {temps_list[0]['temp']}"),
    [temps_list]  # 当temps_list变化时，重新设置标题
)

内容的提问来源于stack exchange，提问作者xiao yu