python - 将返回的字符串列表转换为交互式输出

我有一个搜索引擎，返回包含文章的数组“文章”。

但是，我想为您提供更多Twitter新闻提要设计。我还希望能够单击它并展开它们。

这是搜索引擎回调：

from dash.dependencies import Input, Output, State
import dash_core_components as dcc

import pickle

from ..server import app

@app.callback(
    Output('output-container-button', 'children'),
    [Input('button', 'n_clicks')],
    [State('input-box', 'value')])
def update_search(n_clicks, value):
    f = pickle.load(open("dashboard/data-mm/google-nlu.p", "rb"))
    # let's filter f according to value
    articles = []
    for article in f:
        if value in article['headline']:
            # We want to print this
            articles.append(article)
    print(articles[0])
    return dcc.Markdown([f"{article['headline']}\n" for article in articles])

这是我的“ app.py”：

app.layout = html.Div(
    [
        dcc.Tabs(
            [
                dcc.Tab(
                    label='Search article',
                    value= 'search',
                    children = article_search() # here handle the potential array
                                                # of articles and put it in form?
                )
            ]
        )
    ]
)

现在看起来像这样：



每个黑线都是一个article['headline']。这是article[0]：

{'headline': 'this is the headline',
 'body': 'Lorem Ipsum is simply dummy text of the printing and typesetting '
         'industry. Lorem Ipsum has been the industry's standard dummy text '
         'ever since the 1500s, when an unknown printer took a galley of '
         'type and scrambled it to make a type specimen book. It has '
         'survived not only five centuries, but also the leap into '
         'electronic typesetting, remaining essentially unchanged. It was '
         'popularised in the 1960s with the release of Letraset sheets '
         'containing Lorem Ipsum passages, and more recently with desktop '
         'publishing software like Aldus PageMaker including versions of '
         'Lorem Ipsum.',
 'sentiment': -0.4000000059604645,
 'topics': {'/Finance': 0.6600000262260437},
 'topics_kw': ['Politics', 'The financial sector', 'Media',
               'Society', 'Social projects'],
 'date': datetime.datetime(2019, 9, 25, 0, 0)}

最佳答案

懒惰的方式：


至于将数据推送到应用程序，您可以将值存储在dcc.Store对象（作为json）中。
然后，您可以创建一个回调，该回调将来自json的信息格式化为单独的html objects。
每个html object都可以具有动态回调，该回调可以更改内容的style属性，以便用户单击它时可以执行您想要的操作。


这样做更好：


创建自己的破折号组件，其中包含其自己的react，该组件将定义与所需格式相似的行为。 （警告，除非您是经验丰富的UX / UI设计人员，否则很难使它看起来不错。）
将数据推送到启用了js的数据对象-可能是window.dataLayer或类似的对象。
编写一些与每个破折号组件交互的js函数，以将数据从交互层推回到您的核心应用中。


抱歉，我无法更详细和更具描述性-这更多是示意性回答，而不是解决方案。

关于python - 将返回的字符串列表转换为交互式输出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59896367/