Python dash：如何将用户输入与同一行上的其他文本组合在一起

Question

我试图将一些文本与用户定义的文本合并在同一行中。我想将“某些文本”保留在组织的回调定义之外。如何将一些文本字符串与用户定义的输入字符串组合起来？下面的示例，请注意

html.Div()

和

html.P()

如何在 2 个不同的行中返回文本

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id='user-input', type='text', placeholder='Enter a string...'),
    html.Br(),
    html.Div([
        html.P("Here's an additional paragraph for context:"), ## line 1
        html.Div(id='output-text') ## line 2
    ])
])

@app.callback(
    Output('output-text', 'children'),
    [Input('user-input', 'value')]
)
def update_text(input_value):
    return f'This is the text: {input_value}'

app.run_server(debug=True)

退货：

提前非常感谢

Answer 1

您可以使用

dash.html.Span

组件来避免在 static 和 [callback-triggered] dynamic 应用内容

之间自动引入换行符

就像标准 HTML 中一样，Dash HTML Span 组件是 内联级元素。

例如：

import dash
from dash import dcc, html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dcc.Input(
            id="user-input", type="text", placeholder="Enter a string..."
        ),
        html.Br(),
        html.Div(
            [
                html.Span(
                    "Here's an additional paragraph for context: "
                ),                            ## line 1
                html.Span(id="output-text"),  ## line 2
            ]
        ),
    ]
)

@app.callback(
    Output("output-text", "children"), [Input("user-input", "value")]
)
def update_text(input_value):
    return f"This is the text: {input_value}"

app.run_server(debug=True, dev_tools_hot_reload=True)

产生：