Dashのソースコード量が多くなって、変数がグローバル汚染してしまうのを避けるために、Dashオブジェクトをクラス内部に保持したい場合のコールバックの書き方。

普通の書き方。

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Input(id='input_id', value=None, type='text'),
    html.Div(id='output_div')
])


@app.callback(
    Output(component_id='output_div', component_property='children'),
    [Input(component_id='input_id', component_property='value')]
)
def update_output_div(input_value):
    if input_value:
        return html.Div(className='output-area', children=[
            html.Span(input_value)
        ])
    else:
        html.Div()

クラス内部に書くやり方。


class MyDash():

    def __init__(self, app_name):
        self.app = dash.Dash(app_name)

        self.app.layout = html.Div([
            dcc.Input(id='input_id', value=None, type='text'),
            html.Div(id='output_div')
        ])

        # デコレータは使わない
        self.app.callback(
            Output(component_id='output_div', component_property='children'),
            [Input(component_id='input_id', component_property='value')]
        )(self.update_output_div)

    def update_output_div(self, input_value):
        if input_value:
            return html.Div(className='output-area', children=[
                html.Span(input_value)
            ])
        else:
            html.Div()