Javascript 如何创建动态组件

我看到了将我的网站的网络字节传输最小化的机会，但却找不到合适的解决方案

在盖茨比中，我使用.mdx文件。在这些文件中，我可以使用React组件，例如：

在一个.json文件中定义了几十张卡片，只要在de mdx文件中调用这个组件并传递它们的id，就可以在整个网站上使用

Cards组件看起来有点像这样：

import React from 'react'
import Img from 'gatsby-image';
import { StaticQuery, graphql } from 'gatsby';


const Cards = (props) => {
    const card_id = props.id ? props.id.slice(0, 2) : []  // grab id

    return <StaticQuery
        query={graphql`
        query Query  {
                    images: allFile(filter: { sourceInstanceName: { eq: "card-images" } }) {
                        edges {
                            node {
                                childImageSharp {
                                    fluid(maxHeight: 256, quality: 100) {
                                        ...GatsbyImageSharpFluid_withWebp
                                        ...GatsbyImageSharpFluidLimitPresentationSize
                                    }
                                }
                                name
                            }
                        }
                    }
                    allCardsJson {
                        nodes {
                            name
                            id
                        }
                    }
                }
        `}
        render={(data) => {
            
            return(
               // returns a component by filtering 'data' by 'card_id'
            )
        }}
    />
}

从“React”导入React
从“盖茨比图像”导入Img；
从“gatsby”导入{StaticQuery，graphql}；
常量卡=（道具）=>{
const card_id=props.id？props.id.slice（0，2）：[]//抓取id
返回{
返回(
//通过“卡片id”过滤“数据”返回组件
)
}}
/>
}

一切正常，但是

使用此组件时，StaticQuery的完整结果（意思是：过滤后的所有卡片都在返回中完成，而不是在StaticQuery中完成）将发送给页面的访问者。这是不必要的，也是对网络带宽的浪费，因为例如，页面上只使用一个（或几个）卡

我知道静态查询是。。静止的因此，我无法在此查询中动态筛选以限制结果的大小

动态查询在构建页面时使用，而不是在组件内部使用

是否可以以某种方式创建具有动态内容（在别处定义）但仅限于所需数据的组件？（就像我尝试过的那样提供id）

我正在考虑为每张卡创建一个单独的文件。然后将所需的卡导入mdx文件并将其传递给组件。想法

---

没有关于我的用例的文档。这让我怀疑我是否按预期使用了它。

在运行

gatsby develope

或

gatsby build

时，GraphQL查询只运行一次。盖茨比的工作方式违反直觉，但：

盖茨比在构建时使用GraphQL，而不是用于实时站点

以及GraphQL是如何融入其中的

这意味着您已经按照预期的方式构建了组件在构建过程中所有卡都会被查询并保存在内存中。使用卡片为页面创建HTML时，仅使用ID为的卡片来构建页面。因此，用户只能看到使用过滤ID传输的页面

如果页面中确实只有ID为的卡，您可以再次检查：

• 运行

  gatsby clean

  ：确保删除页面的旧片段
• 运行

  gatsby build

  ：从头开始创建站点
• 检查项目根目录中的

  public

  文件夹。这是盖茨比创建的经典网页。使用卡片导航到您的页面，例如

  /public/blog/example page with card

  。看看页面的HTML：它是包含所有卡片还是只包含您需要的ID

---

我通过编辑gatsby-node.js将使用过的数据添加到页面上下文中解决了这个问题：

获取帖子的mdxAST，过滤组件，然后过滤使用的ID

将此ID列表添加到页面上下文中

将上面问题中所述的查询移动到post GraphQL查询。使用页面上下文提供的ID列表将数据过滤到本文中使用的ID

将此数据作为属性传递给MDXRenderer

将.mdx文件中的此数据传递给卡组件，例如：

现在，组件在不使用StaticQuery的情况下接收数据

---

这是可行的，但感觉有点奇怪。在我看来，一定有更好、更干净的解决方案。

你看过useStaticQuery hook吗。。。当然，您可以创建许多json文件（或者使用axios获取一些api；运行时获取），每个创建的页面一个。。。如果仅在构建时，您可以通过Context传递过滤后的数据输入谢谢回复！我发现这是无效的。在构建过程中，静态查询的完整结果将写入/page data/sq/*.JSON中的JSON文件。每个访问者都会加载此文件。它包括所有卡，而不仅仅是组件中使用的卡，这会导致不必要的数据传输量。也许我做错了什么，艾德克。因此，我想知道如何将其过滤为页面上使用的ID。我差不多解决了这个问题（见答案）。我对你的意见很好奇。