javascript - 如何根据索引对集合进行分组并在 reactjs 中显示为选项卡

Question

我正在构建一个基于 ReactJS 实现选项卡的 reactjs 网站。我需要根据 tabIndex(3 个组) 对一组项目/文章进行分组，并使用 react-tabs 在 ReactJS 中将它们显示为视图。我有一个较早的代码，其中该集合是一个对象，其中添加了 3 个（选项卡）组文章。但是，当我动态添加文章时，这不起作用。所以，我现在使用的是所有文章的单一集合，并且需要根据 tabIndex 进行分组。每个 artcile 都有属性 - id、tabIndex/tabName、title、text。

请借给我帮助。以下是代码片段：

return this.state.articles.map(tabArticles => {
      return (
        <TabPanel>
          {tabArticles.map(
            article => (
              <div>
                <br />
                  <p className="option__text">
                    <Link to={`article/${article['id']}`}>{article['title']}</Link>
                  </p>
                  <p className="option__text">{(article['text']).substring(0, 20) + "..."}</p>
                  <br/>
              </div>
            )
          )}
        </TabPanel>
      )});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

我在javascript中使用了“过滤器”，代码对我有用。