将值保留在虚线选项卡上

Question

我有一个多标签短跑应用程序。当移动到另一个选项卡并稍后返回到上一个选项卡时，保持选项卡中存储的值的最佳方式是什么，此时该选项卡将刷新。我有四个选项卡，尤其是在第一个选项卡中，所有内容都是动态生成的。下面是我的索引页代码：

import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_auth
import dash_core_components as dcc
import pandas as pd

from Hotspot_App_Local import app
from apps import GeoPlot, Scatter, Moran, Table

import os

VALID_USERNAME_PASSWORD_PAIRS = {###": "###"}


app.title = "Hotspot Analysis"
auth = dash_auth.BasicAuth(app, VALID_USERNAME_PASSWORD_PAIRS)

nav_item = dbc.Tabs(id = 'tabs', active_tab = '/page-1', className="mt-3", persistence= True, persistence_type = 'session',
    children = [
        dbc.Tab(label= "World Map", tab_id= '/page-1', label_style={"color": "#000080", 'font-size': 20, 'font-weight': 'bold'}),
        html.Br(),
        dbc.Tab(label= "Table", tab_id= '/page-2', label_style={"color": "#000080", 'font-size': 20, 'font-weight': 'bold'}),
        html.Br(),
        dbc.Tab(label= "Moran's I", tab_id= '/page-3', label_style={"color": "#000080", 'font-size': 20, 'font-weight': 'bold'}),
        html.Br(),
        dbc.Tab(label= "Scatter Plots", tab_id= '/page-4', label_style={"color": "#000080", 'font-size': 20, 'font-weight': 'bold'})
    ],

)

navbar = dbc.Navbar(
    [
        html.A(
            # Use row and col to control vertical alignment of logo / brand
            dbc.Row(
                [
                    dbc.Col(html.Img(src= app.get_asset_url('logo_2.png'), height="100px"), className="ml-5"),
                ],
                align="center",
                no_gutters=True,
            ),
            href= "###",
        ),
        dbc.NavbarToggler(id="navbar-toggler"),
        dbc.Nav([nav_item], navbar=True, style= {'margin-left': '40em',})
    ],
    color="white",
    dark=False,
    className = "mb-5"
)

labels = pd.read_csv('CSV/Labels.csv')
label_dict = {}
for i in range(len(labels)):
    label_dict[labels['parameter'].loc[i]] = labels['label'].loc[i] + f"  ({labels['units'].loc[i]})"

label_back = {}
for i in range(len(labels)):
    label_back[labels['label'].loc[i] + f"  ({labels['units'].loc[i]})"] = labels['parameter'].loc[i]

merged_df = pd.read_csv('CSV/Merged.csv')
merged_dict = merged_df.to_dict('list')

app.layout = html.Div(
    [
        dcc.Store(id= 'label_back', data= label_back, storage_type= 'local'),
        dcc.Store(id= 'labels', data= label_dict, storage_type= 'local'),
        dcc.Store(id="scatter_layers_glob", storage_type= 'local'),
        dcc.Store(id="scatter_layers_cont", storage_type= 'local'),
        dcc.Store(id="store_columns", storage_type= 'local'),
        dcc.Store(id="selected_columns", data= [], storage_type= 'local'),
        dcc.Store(id= 'range_store', storage_type= 'local'),
        dcc.Store(id= 'store_setting', storage_type= 'local'),
        html.Br(),
        navbar,
        html.Div(id="page"),
    ]
)

app.validation_layout = html.Div([navbar, GeoPlot.layout, Table.layout, Moran.layout, Scatter.layout])


@app.callback(Output("page", "children"), [Input("tabs", "active_tab")])
def display_page(pathname):
    if pathname == "/page-1":
        return GeoPlot.layout
    if pathname == "/page-2":
        return Table.layout
    if pathname == "/page-3":
        return Moran.layout
    if pathname == "/page-4":
        return Scatter.layout
    # if not recognised, return 404 message
    return html.P("404 - page not found")


IN_CONTAINER = os.environ.get("IN_CONTAINER", False)

if __name__ == "__main__":
    if IN_CONTAINER:
        app.run_server(host="0.0.0.0", port=8050)
    else:
        app.run_server(debug= True)

我试着在dbc.Tabs上使用persistence关键字，但这不起作用。有谁知道一个简单的解决方法吗

Answer 1

您需要使用希望存储值的每个组件的持久性标志。并非所有组件都提供此功能，您可以在此处找到其中一些：https://github.com/plotly/dash-core-components/pull/646

dcc.Tabs的持久性标志仅存储当前的value，因此是所选选项卡

如果您编写自己的组件，则需要在组件中添加以下道具：

persistence: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value'])),
persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),

其余的部分或多或少都是开箱即用的。以上所有的工作都很好，我可以在标签之间来回切换

有关更多详细信息，请参阅here