在 Gatsby 中展示投资组合元素的引导选项卡答案

【问题标题】：Bootstrap Tabs to Showcase Portfolio Elements in Gatsby在 Gatsby 中展示投资组合元素的引导选项卡
【发布时间】：2020-10-15 08:37:01
【问题描述】：

我正在我的个人操场上工作，我需要创建一个引导选项卡来展示投资组合元素。因此，例如，当我单击类别 web development 时，它只会显示该类别中的项目。我正在做这样的事情：https://jsfiddle.net/solodev/1c2yty3x/28/

因此，作为记录，我有一个名为 works 的集合，其中我在 graphql 上提取了以下数据：

export const query = graphql`
  {
    allStrapiWorks {
      nodes {
        id
        name
        slug
        category
        stack {
          stack_name
          id
        }
        featured_image {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    }
  }
`

如您所见，我的类别包括 3 个项目：web development、web design、app development。

所以到目前为止我所做的是我解构了我需要的所有项目：

  const data = useStaticQuery(query)
  const { allStrapiWorks: { nodes:works } } = data
  const [value, setValue] = useState(0)
  const { id, name, stack, featured_image, category, slug } = works[value]

还请注意，我使用useState 来确定正在单击的项目/索引。

然后在我的实际代码中放置以下内容：

<!--- NAVIGATION -->
                    <div className="col-lg-12 mb-30" data-aos="zoom-in">
                        <ul className="nav justify-content-center" id="categories" role="tablist">
              
              { 
                  category.map((cat, index) => {
                    <li class="nav-item">
                         <a 
                           aria-controls={id} 
                           aria-selected="true" 
                           onClick={() => setValue(index)} 
                           className="nav-link active show portfolio-nav" 
                           data-toggle="tab" 
                           data-work-tab={cat.toUpperCase()} 
                           href={`#${cat}`} 
                           id={id} 
                           role="tab">
                            {cat}
                          </a>
                  </li>
                  })
              
              }

                    
                        </ul>
                    </div>


<!--- THE CONTENT -->
                    <div className="col-lg-12">
                        <div className="tab-content" id="catsContent">
            { category.map((cat, index) => {
                 return <div aria-labelledby={index} class="tab-pane fade show active" id={`#${cat}`} role="tabpanel">
            })
            }
                        

                                <div className="row">
                                    <div className="project col-xl-3 col-md-6 col-12">
                                        <div className="project-inner">
                                            <div className="project-image">
                                                <a href="work-detail.html">

                          <Image fluid={featured_image.childImageSharp.fluid} alt={name}/>
                        </a>
                                            </div>
                                            <div class="project-content">
                                                <h3 className="title text-center mb-3">
                           <Link to={`/works/${slug}`} key={id} >{name}</Link>
                        </h3>
                        {
                        stack.map(stackItem => {
                          return <span className="mt-2" data-tag={stackItem.stack_name} key={stackItem.id}>{stackItem.stack_name}</span>
                        })
                      }

                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>

如您所见，我正在填充数据并在我的类别上进行映射，以根据类别选择在该类别下分类的元素。

但是，这不起作用。我认为我的逻辑不正确，我很困惑要修复哪一个。

知道如何解决这个问题吗？

【问题讨论】：

这里最好的办法是使用query-variables-或-eq:gatsbyjs.com/docs/graphql-reference/#query-variables。您的技术试图操纵allStrapiWorks（但通过API 查询更容易处理）。 “这不起作用”什么不起作用？（你得到控制台错误？数据不正确？请更具体，因为很难测试你的代码）。
我是 Gatsby 的初学者，所以如果我不太具体，我深表歉意。请不要生气。我更新了关于我收到的错误的问题。
40 中有什么内容？那里有主要的error。其余为warnings
其实我只是要求正确的逻辑来实现这一点。我发布的错误与代码无关，因为它们引用了不同的页面。

标签： javascript reactjs twitter-bootstrap gatsby

【解决方案1】：

我确实发现你的部分代码与 catergory.map 函数存在问题。

您没有从 category.map 返回任何内容。由于您使用的是括号与括号，因此您将需要一个 return 语句或只用括号包装代码：

              { 
                  category.map((cat, index) => (
                    <li class="nav-item">
                         <a 
                           aria-controls={id} 
                           aria-selected="true" 
                           onClick={() => setValue(index)} 
                           className="nav-link active show portfolio-nav" 
                           data-toggle="tab" 
                           data-work-tab={cat.toUpperCase()} 
                           href={`#${cat}`} 
                           id={id} 
                           role="tab">
                            {cat}
                          </a>
                  </li>
                  ))
              
              }

【讨论】：