Plotly Dash如何在页面加载时展示新闻文本与可点击链接

直接按以下逻辑调整即可，不需要写任何回调函数，完全满足页面加载即拉取最新内容、链接可点击的需求：

• 将接口请求逻辑移入渲染时调用的函数内，避免全局请求只在服务启动时执行一次的问题
• 直接生成Dash原生HTML组件渲染新闻列表，不需要依赖dcc.Markdown解析字符串，从根源避免链接无法点击的问题
• 直接将函数返回的新闻内容作为布局的子元素，页面每次刷新/加载都会自动执行拉取逻辑，不需要额外触发组件

完整可运行代码 #

import requests
from dash import Dash, html

app = Dash(__name__)

def fetch_latest_news():
    # 接口请求逻辑放在函数内，每次调用都会拉取最新数据
    url = "https://google-news1.p.rapidapi.com/search"
    params = {"q":"bitcoin","lang":"en","limit":"10","when":"1h","exact_phrase":"bitcoin"}
    headers = {
        "X-RapidAPI-Key": "XXXXXXXXX",
        "X-RapidAPI-Host": "google-news1.p.rapidapi.com"
    }
    resp = requests.get(url, headers=headers, params=params).json()
    
    # 直接生成带可点击链接的组件列表
    news_items = []
    for article in resp["articles"]:
        news_items.append(
            html.Div([
                html.A(
                    article["title"],
                    href=article["link"],
                    target="_blank",
                    style={"fontSize": "16px", "color": "#1a73e8", "textDecoration": "none"}
                ),
                html.Hr(style={"margin": "12px 0", "border": "none", "borderTop": "1px solid #eee"})
            ])
        )
    return news_items

# 布局直接调用拉取函数，每次页面加载都会自动执行获取最新内容
app.layout = html.Div(
    [
        html.H1("比特币实时新闻"),
        html.Div(children=fetch_latest_news())
    ],
    style={"maxWidth": "900px", "margin": "40px auto", "padding": "0 20px"}
)

if __name__ == "__main__":
    app.run_server(debug=True)

关键说明 #

• 无需写callback的原因：Dash渲染页面前会完整执行layout定义中的所有逻辑，直接将fetch_latest_news()的返回值作为容器子元素，每次打开、刷新页面都会重新发起接口请求，完全满足无交互自动刷新的要求
• 如果坚持使用dcc.Markdown：不要直接拼接原生a标签字符串，需要按Markdown链接格式[新闻标题](跳转链接)拼接内容，同时给组件设置dangerously_allow_html=True参数才会解析HTML/链接格式，相比之下直接用原生html.A组件更稳定，不会出现解析异常
• 原代码的逻辑缺陷：之前将接口请求写在全局作用域，仅会在服务启动时执行一次，后续用户访问页面不会拉取新数据，将请求逻辑移入每次渲染都会调用的函数内即可解决该问题

内容的提问来源于stack exchange，提问作者Kenneth Lott