在绘图破折号布局中使用 HTML 标签嵌入变量

我有一个变量，其中一些文本已经包含 HTML 标签 - 例如换行符/粗体/等。 我根据某些条件从数据框中提取此变量。

我想在我的 Dash 布局中使用它。

myData = df["HTML_TEXT_COLUMN].values[0]

例如，您可以考虑 myData 变量具有以下文本 -

line1 <br> line2 <br> line3

I我正在尝试将此变量用作我的破折号布局中的 HTML，如下所示 -

app.layout = html.Div(children = [
    html.H1("Some header),
    myData
    # OR html.P(myData)
    ]
)

这将布局视为文本，并将 HTML 标签视为文本。 相反，我想将该变量视为 HTML 并考虑换行符。 我做错了什么？

理想情况下，我不想将变量保存为 HTML 文件，然后在 iFrame 中使用该 html 文件，因为我不想保存不必要的 HTML 文件。

需要做的就是在的 Dash 布局中使用 dangerously_set_inner_HTML 属性。此属性允许将字符串作为 HTML 传递，Dash 会将其呈现为 HTML 而不是纯文本。

以下是如何使用它的方法：

import dash
import dash_html_components as html
import pandas as pd

# 示例数据
df = pd.DataFrame({"HTML_TEXT_COLUMN": ["line1 <br> <b>line2</b> <br> line3"]})
myData = df["HTML_TEXT_COLUMN"].values[0]

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1("Some header"),
    html.Div(dangerously_set_inner_HTML={'__html': myData})
])

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

在这个例子中：

1. 我们从 DataFrame 中提取 myData 。
2. 在 html.Div 组件中，我们使用 dangerously_set_inner_HTML 属性。
3. 我们将一个字典传递给 dangerously_set_inner_HTML ，其中包含一个键 __html ，其值为 myData 。

这将呈现包含三个行的标题，其中“line2”以粗体显示。

重要提示：

• 名字 “dangerously_set_inner_HTML” 并非偶然。如果字符串来自不受信任的来源，则允许 HTML 注入，这会带来安全风险。确保信任用于创建 myData 的数据，或者在使用 dangerously_set_inner_HTML 之前对其进行清理。
• 还有其他方法可以实现这一点，例如使用 dcc.Markdown 组件，该组件允许使用 Markdown 格式化文本，以及使用 html.Pre 组件来保留预格式化的文本。选择最适合需要的方法。