如何从 JSON 文件在 Gatsby 中创建页面？

Question

我正在尝试使用 JSON 文件在 Gatsby 中动态创建页面。在该文件中，我定义了应该在页面中呈现的组件。我遵循了 Gatsby 的文档，但是，它没有我想要的。所以我尝试通过读取 JSON 文件并遍历其中的组件并使用 React.createElement() 创建它们来创建页面。最后，我得到了一组 react 组件，我将这些组件传递给了 createPage 方法的上下文对象中的 children prop 到模板页面组件。这是解决这个想法的正确方法吗？它在 Gatsby 中是否可行？我认为可以说我尝试过动态导入并且效果很好，但我正在尝试找到一种方法，我不必将所有组件都转储到一个文件夹中。我有这个项目的 Github 仓库。 https://github.com/ahmedalbeiruti/Gatsby-dynamic-pages这是代码的主要部分：gatsby-node.jsexports.createPages = ({actions})=>{    const {createPage} = actions    const resutl = componentsRenderer(data.page.layout.columns)    createPage({        path: data.page.name,        component: path.resolve('./src/template/page.js'),        context:{            children: resutl        }    })}const componentsRenderer = components => {    return components.map(component => {        let children = []        if (component.children){            children = componentsRenderer(component.children)        }        const element = require(`${__dirname}/${component.path}`)        return React.createElement(element, Object.assign({},{key: component.key},{...component.props}),children)    });}数据/样本页面无道具.json{        "page":{            "name": "about",            "layout":{                "columns": [                    {                        "key":"column_1",                        "name": "Column",                        "path": "/src/components/layouts/column.jsx",                        "children":[                            {                                "name": "FirstComponent",                                "path": "/src/components/custom/first-component.jsx",                                "key": "first_component_1"                            }                        ]                    },