0

我有一个正在接收数据的组件：

const ProductTile = ({ data }) => {
  let { productList } = data
  var [products] = productList
  var { products } = products;
  return (
    <div>
      <div className="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">

        {products.reduce((products, product) => products.find(x => x.productId === product.productId) ? products : [...products, product], []).map(({ colorCode, defaultColorCode, now, productId, productCode, productDescription, }, index) => {
            return (
              <Link key={`${productId}${index}`}
                href={{
                  pathname: '/s7-img-facade/[slug]',
                  query: { slug: productCode },
                }}
                passHref>
                  /* template */
              </Link>
            )
          })}
      </div>
    </div>
  )
}

export default ProductTile

它创建了一个模板网格，每个模板都包含在一个<Link>渲染动态组件的组件中；

/s7-img-facade/[product]

我希望动态组件能够products访问ProductTile .

我知道我可以getStaticProps在动态组件中做一个来做另一个请求，但这似乎是多余的而不是枯燥的......

任何想法如何动态组件访问products对象？

提前致谢！

4

1 回答 1

1

您有正确的想法 - 您可以在query字段中传递其他属性，但您需要使用getServerSideProps从query参数中提取这些属性并将其作为道具传递给页面组件。像这样的东西：

// pages/product.js
...
  <Link key={`${productId}${index}`}
    href={{
      pathname: '/s7-img-facade/[slug]',
      query: {
        description: productDescription, 
        slug: productCode
      },
    }}
    passHref
  >
    /* template */
  </Link>
...

// pages/s7-img-facase/[slug].js
export default function S7ImgFacasePage({ description }) {
  return <p>{ description }</p>
}

export const getServerSideProps = ({ params }) => {
  const description = { params }
  return {
    props: {
      description
    }
  }
}

所以基本上你从参数的第一页传递它，在第二页中读取它getServerSideProps，然后将它作为道具传递给第二页组件。

您提到getStaticProps过-这不适用于静态页面，因为getStaticProps仅在构建时运行，因此它对您在运行时发送的参数一无所知。如果您需要一个完全静态的站点，那么您应该考虑将其作为 url 参数传递并读入useEffect或传递所有可能的页面getStaticPaths并getStaticProps生成所有静态页面。

于 2021-07-14T23:36:06.457 回答