React+Gatsby中Styled Components组件内容与Props传递问题求助

问题根源 #

你当前的矛盾点在于：

• 单独导入Styled Components样式组件时，仅复用了样式标签，但没有触发WhyChooseIcons组件内的GraphQL数据查询与内容渲染逻辑，因此看不到图标内容。
• 导入整个WhyChooseIcons组件时，组件内部的WhyChooseH2是硬编码的，未对外暴露props接口，无法从外部控制其样式属性。

修复步骤 #

1. 修改whyChooseIcons组件，添加props接收逻辑 #

调整组件中的WhyChooseIcons函数，让它接受外部传入的props，并传递给内部的Styled Components：

import React from 'react'
import styled from "styled-components"
import { useStaticQuery, graphql } from 'gatsby'

// 原有样式组件保持不变
export const WhyChooseSection = styled.section`
  border-bottom: 1px solid var(--charcoal);
`

export const WhyChooseH2 = styled.h2`
  display: ${(props) => props.displayH2};
  text-align: center;
`

export const WhyChooseContent = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 40px;
  column-gap: 100px;
  row-gap: 30px;

  @media(min-width: 992px) {
    justify-content: space-between;
    column-gap: 0;
  }

  .why-icon {
    width: 180px;
    height: 145px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;

    p {
      margin-bottom: 0;
      font-size: 19px;
      font-weight: var(--font-bold);
    }
  }
`

// 添加props参数，设置默认值保证组件默认显示逻辑正常
export function WhyChooseIcons({ displayH2 = "block" }) {
  const data = useStaticQuery(graphql`
    {
      whyChooseIcons: allWp {
        nodes {
          acfOptionsOfficeSettings {
            whyChooseInteriorDetails {
              whyChooseIcons {
                whyChooseIconGraphic {
                  altText
                  id
                  sourceUrl
                }
                whyChooseIconTitle
              }
            }
          }
        }
      }
    }
  `)

  return (
    <>
    {data.whyChooseIcons.nodes.map((node, index) => (
      <WhyChooseSection key={index}>
        {/* 将外部传入的props传递给样式组件 */}
        <WhyChooseH2 displayH2={displayH2}>Why Choose Interior Details?</WhyChooseH2>
        <WhyChooseContent>
          {node.acfOptionsOfficeSettings.whyChooseInteriorDetails.whyChooseIcons && node.acfOptionsOfficeSettings.whyChooseInteriorDetails.whyChooseIcons.map((item) => (
            <div className='why-icon' key={item.whyChooseIconGraphic.id}>
              <img src={item.whyChooseIconGraphic.sourceUrl} alt={item.whyChooseIconGraphic.altText} />
              <p>{item.whyChooseIconTitle}</p>
            </div>
          ))}
        </WhyChooseContent>
      </WhyChooseSection>
    ))}
    </>
  )
}

export default WhyChooseIcons

2. 修改首页代码，导入整个组件并传递props #

删除首页中单独导入的样式组件，替换为导入整个WhyChooseIcons组件，使用时传入displayH2 props即可：

import * as React from "react"
import { graphql } from 'gatsby'

import Seo from "../components/seo"
import Hero from '../components/heroComponent'
// 替换单独样式导入为整个组件导入
import WhyChooseIcons from '../components/whyChooseIcons'
import HomeProducts from '../components/homeProducts'
import HomeTestimonials from '../components/testimonials'
import HomeNewHomes from '../components/homeNewHomes'
import HomeFamilyTreatment from '../components/homeFamilyTreatment'
import HomeSolutions from '../components/homeSolutions'
import HomeMotorization from '../components/motorizationComps'
import HomeBrands from '../components/homeBrands'
import CTAOne from '../components/ctaOne'

const IndexPage = (hero) => {
  const heroData = hero.data.homeHero

  return (
    <>
      {heroData.edges.map(({ node }, index) => (
        <Hero key={index} heroTitle={node.template.homePage.heroH1} heroSubTitle={node.template.homePage.heroParagraph} heroBg={node.template.homePage.heroBackground.gatsbyImage} heroBtnOneText={node.template.homePage.heroButton1Text} heroBtnOneURL={node.template.homePage.heroButton1Url} heroBtnTwoText={node.template.homePage.heroButton2Text} heroBtnTwoURL={node.template.homePage.heroButton2Url} />
      ))}
      {/* 使用整个组件并传递props */}
      <WhyChooseIcons displayH2="none" />
      <HomeProducts />
      <HomeTestimonials />
      <HomeNewHomes />
      <HomeFamilyTreatment />
      <HomeSolutions />
      <HomeMotorization />
      <HomeBrands />
      <CTAOne />
    </>
  )
}

export default IndexPage

export const Head = () => <Seo title="Home" />

export const HeroContent = graphql`
  {
    homeHero: allWpPage(filter: {template: {templateName: {eq: "Home Template"}}}) {
      edges {
        node {
          template {
            ... on WpHomeTemplate {
              homePage {
                heroH1
                heroParagraph
                heroButton1Text
                heroButton1Url
                heroButton2Text
                heroButton2Url
                heroBackground {
                  gatsbyImage(placeholder: BLURRED, width: 1920)
                  altText
                }
              }
            }
          }
        }
      }
    }
  }
`

原理说明 #

• 修改后的WhyChooseIcons组件对外暴露了displayH2参数，外部传入的props会直接传递给内部的WhyChooseH2样式组件，实现样式控制。
• 导入整个组件时，会自动执行组件内的GraphQL查询，渲染图标内容，同时应用Styled Components的样式，一次性解决内容加载和props传递的问题。

内容的提问来源于stack exchange，提问作者ccrider