如何从 React 组件写入文件？

Question

我有一个 SideNav 菜单，用于查找名为 route.js 的文件，其中包含一个名为 routes 的数组。我正在尝试从另一个组件更改 routes.js 中的路由值。我希望能够从组件中添加和删除文件 routes.js 中的物理数组。任何帮助将不胜感激。

import Shop from "examples/Icons/Shop";
// import Office from "examples/Icons/Office";

const routes = [
  {
    type: "collapse",
    name: "Our Mission",
    key: "dashboards",
    icon: <Shop size="12px" />,
    collapse: [
      {
        name: "Ways We can Help",
        key: "default",
        route: "/dashboards/default",
        component: Default,
      },
      {
        name: "How It Works",
        key: "automotive",
        route: "/dashboards/automotive",
        component: Automotive,
      },
      {
        name: "Who We Are",
        key: "smart-home",
        route: "/dashboards/smart-home",
        component: SmartHome,
      },
    ],
  },
  { type: "title", title: " ", key: "space1" },
  {
    type: "collapse",
    name: "Services",
    key: "services",
    icon: <Shop size="12px" />,
    href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
    component: Default,
    noCollapse: true,
  },
];
export default routes;

访问 routes.js

的组件

import routes from "../../../routes";
const loggedroutes = [
  {
    type: "collapse",
    name: "Profile",
    key: "profile",
    icon: <CgProfile size="12px" color="blue" />,
    route: "/dashboards/Default",
    collapse: [],
  },
  {
    type: "collapse",
    name: "Calendar",
    key: "calendar",
    component: link,
    route: "/dashboards/Default",
    icon: <GoCalendar size="12px" color="blue" />,
    collapse: [],
  },
]

routes = loggedinroutes;

我想更改 routes.js 中的数据以匹配数组 loggedinroutes

Answer 1

好吧，虽然不太了解你在做什么，但我整理了一个快速沙盒来说明我将如何处理这个问题。

https://codesandbox.io/s/hopeful-shirley-q9mhz?file=/src/routes.js

我基本上会使用基于按钮 click/state/page query/etc 的逻辑，并将其传递给一个函数，该函数将动态加载导航栏中的路线。在 app.js 文件中，您可以看到我如何使用 useState() 挂钩和单击按钮来动态加载路由。

我确信有更优雅的方法可以完成此操作，但我希望这能让您朝着正确的方向前进！

如何从 React 组件写入文件？

How can I write to a file from a React component?

arrays

jsx

node.js

reactjs