https://create-react-app.bootcss.com/ (opens new window)

https://www.bilibili.com/video/BV1rz42167A6 (opens new window)

https://component-party.lainbo.com/ (opens new window)

pnpm

pnpm dlx create-react-app demo --template typescript

router

pnpm i react-router-dom

RouterProvider

import { RouterProvider } from "react-router-dom";
import router from "./router";

function App() {
  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

重定向

vue 的redirect 在react中是Navigate

import { createBrowserRouter, Navigate } from "react-router-dom";
import Main from "../pages/main.js";
import Home from "../pages/home/index.js";
import Mall from "../pages/mall/index.js";
import User from "../pages/user/index.js";
import Page1 from "../pages/other/page1.js";
import Page2 from "../pages/other/page2.js";

const routes = [
  {
    path: "/",
    Component: Main,
    children: [
      {
        path: "/",
        Component: () => <Navigate to="/home" />,
      },
      {
        path: "home",
        Component: Home,
      },
      {
        path: "mall",
        Component: Mall,
      },
      {
        path: "user",
        Component: User,
      },
      {
        path: "other",
        children: [
          {
            path: "page1",
            Component: Page1,
          },
          {
            path: "page2",
            Component: Page2,
          },
        ],
      },
    ],
  },
];

const router = createBrowserRouter(routes);
export default router;

动态获取icon

react

import * as Icon from "@ant-design/icons";

const iconToElement = (iconName) => {
  return React.createElement(Icon[iconName]);
};

vue

<template>
  <div>
    <!-- 使用图标组件 -->
    <component :is="iconElement"></component>
  </div>
</template>

<script>
import { defineComponent, h } from 'vue';
import * as Icon from '@ant-design/icons';

export default defineComponent({
  setup() {
    // 创建一个响应式引用，用于存储图标组件
    const iconElement = ref(null);

    // 根据传入的图标名称创建图标组件
    const createIconElement = (iconName) => {
      return h(Icon[iconName]);
    };

    // 示例：创建一个图标元素
    iconElement.value = createIconElement('IconName'); // 替换'IconName'为您想要的图标名称

    return {
      iconElement
    };
  }
});
</script>