react + ts 通过 json 动态加载组件 生成页面

要在 React + TypeScript 中通过 JSON 动态加载组件并生成页面，你可以按照以下步骤进行操作：

1. 创建一个 JSON 文件，包含页面的结构和组件信息。例如，可以使用类似以下结构的 JSON：

{
  "pages": [
    {
      "name": "Page1",
      "components": [
        {
          "name": "Component1",
          "props": {
            "text": "Hello, World!"
          }
        },
        {
          "name": "Component2",
          "props": {
            "data": [1, 2, 3, 4, 5]
          }
        }
      ]
    },
    {
      "name": "Page2",
      "components": [
        {
          "name": "Component3",
          "props": {
            "title": "Welcome to Page 2"
          }
        }
      ]
    }
  ]
}

2. 在你的 React + TypeScript 应用程序中，创建一个组件来加载和渲染 JSON 文件中定义的页面和组件。例如，可以使用以下代码：

import React, { useEffect, useState, ReactNode } from 'react';
import { ComponentType } from 'react';

type ComponentProps = {
  name: string;
  props: object;
};

type Page = {
  name: string;
  components: ComponentProps[];
};

type PageData = {
  pages: Page[];
};

const DynamicPage: React.FC = () => {
  const [pageData, setPageData] = useState<PageData | null>(null);

  useEffect(() => {
    // 使用异步请求加载 JSON 文件
    const fetchData = async () => {
      const response = await fetch('path/to/your/json/file.json');
      const data = await response.json();
      setPageData(data);
    };

    fetchData();
  }, []);

  const renderComponent = (component: ComponentProps): ReactNode => {
    const Component: ComponentType<any> = require(`./components/${component.name}`).default;
    return <Component {...component.props} />;
  };

  if (!pageData) {
    return <div>Loading...</div>;
  }

  return (
    <>
      {pageData.pages.map((page, index) => (
        <div key={index}>
          <h1>{page.name}</h1>
          {page.components.map((component, componentIndex) => (
            <div key={componentIndex}>{renderComponent(component)}</div>
          ))}
        </div>
      ))}
    </>
  );
};

export default DynamicPage;

在上面的代码中，我们首先使用 `useEffect` 和 `fetch` 异步加载 JSON 文件，并将其保存在 `pageData` 状态中。

然后，我们定义了一个 `renderComponent` 函数，根据组件的名称动态导入相应的组件，并传递组件的属性。这里我们假设组件文件位于 `./components` 目录下。

最后，我们通过遍历 `pageData.pages` 和 `page.components` 来渲染页面和组件。

请确保根据你的实际情况修改代码中的路径和组件导入逻辑。

希望这对你有所帮助！如果有任何进一步的问题，请随时问我。