Alexander Farber's questions

我在 Github 上为我的问题准备了一个简单的测试用例：

在 RouterLayout.jsx 中，媒体查询使该图标Outlet在窄屏幕上消失，正如您在动画屏幕截图中看到的那样，我拖动浏览器一侧以使其变小：

根布局.jsx

import { Outlet } from "react-router";
import { useMediaQuery } from "@react-hook/media-query";
import MasterList from "../components/MasterList";

export default function RootLayout() {
  const isSmallScreen = useMediaQuery("(max-width: 768px)");

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-around",
        alignItems: "flex-start",
      }}
    >
      <MasterList />
      {!isSmallScreen && (
        <div>
          <h3>Detail</h3>
          <Outlet />
        </div>
      )}
    </div>
  );
}

我的问题请：

在小手机屏幕上，仅应显示主列表。当点击那里的链接时，应该显示 Page1 或其他页面，并且可以返回到主列表。这还行不通。

在大型平板电脑和计算机屏幕上，主列表和第 1 页或其他内容彼此靠近显示。这已经在我的代码中起作用了。

Link我应该向下面的 MasterList.jsx 中的 s添加一些属性吗？

主列表.jsx

import { Link } from "react-router-dom";

const MasterList = () => {
  const pages = [
    { id: 1, title: "Page 1" },
    { id: 2, title: "Page 2" },
    { id: 3, title: "Page 3" },
    { id: 4, title: "Page 4" },
  ];

  return (
    <div>
      <h2>Master List</h2>
      <nav>
        <ul>
          {pages.map((page) => (
            <li key={page.id}>
              <Link to={"/page" + page.id}>{page.title}</Link>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
};

export default MasterList;

应用程序.jsx

import {
  Route,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
} from "react-router-dom";
import Page1 from "./pages/Page1";
import Page2 from "./pages/Page2";
import Page3 from "./pages/Page3";
import Page4 from "./pages/Page4";
import RootLayout from "./layouts/RootLayout";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route path="page1" element={<Page1 />} />
      <Route path="page2" element={<Page2 />} />
      <Route path="page3" element={<Page3 />} />
      <Route path="*" element={<Page4 />} />
    </Route>
  )
);

const App = () => {
  return <RouterProvider router={router} />;
};

export default App;

我在 Github 上为我的问题准备了一个简单的测试用例：

在我的App.jsx中有以下代码：

<NavDrawer />

<BrowserRouter>
  <Routes>
    <Route path="page1" element={<Page1 />} />
    <Route path="page2" element={<Page2 />} />
    <Route path="page3" element={<Page3 />} />
    <Route path="*" element={<Page4 />} />
  </Routes>
</BrowserRouter>

在NavDrawer.jsx中我有代码：

const drawerLinks = [
  { text: "Page 1", path: "/page1", icon: <CarCrash /> },
  { text: "Page 2", path: "/page2", icon: <Help /> },
  { text: "Page 3", path: "/page3", icon: <Directions /> },
  { text: "Page 4", path: "/page4", icon: <CarRepair /> },
];

function MyListItem({ text, path, icon }) {
  return (
    <ListItem disablePadding>
      <ListItemButton>
        <ListItemIcon>{icon}</ListItemIcon>
        <Link to={path}>
          <ListItemText primary={text} />
        </Link>
      </ListItemButton>
    </ListItem>
  );
}

export default function NavDrawer() {
  return (
    <Drawer>
      <BrowserRouter>
        <nav>
          <List>
            {drawerLinks.map((item, index) => (
              <MyListItem key={index} icon={item.icon} text={item.text} />
            ))}
          </List>
        </nav>
      </BrowserRouter>
    </Drawer>
  );
}

不幸的是，当我单击Link中的其中一个 s时Drawer，没有任何反应，显示的页面保持不变，Page4并且控制台中没有打印任何消息或错误。

当尝试从 Javascript 对象中选择随机单词及其描述时WORDS，不幸的是打印了一个错误：

"use strict";

const WORDS = {
  "one": "Word description 1",
  "two": "Word description 2",
  "three": "Word description 3",
  "four": "",
  "five": "Word description 5",
  "six": "Word description 6",
  "seven": "Word description 7"
};

function randomWord() {
  // select all words with a description
  const entries = Object.entries(WORDS)
    .filter((word, description) => description && description.length > 2);

  console.log(entries);

  // a quicker way of doing parseInt(entries.length * Math.random(), 0)
  const [word, description] = entries[entries.length * Math.random() << 0];
  console.log(word + ': ' + description);
}

randomWord();
randomWord();

这里是JsFiddle中的相同代码。

使用Object.entries()和filter()的组合不是正确的方法吗？

我很难理解 System.CommandLine 的工作原理，并准备了一个简短的.Net fiddle来演示我的问题。

我正在尝试创建一个 C# 控制台应用程序，它将使用--nodes选项调用并传递一个或多个数字 ID：

public static async Task Main(string[] args)
{
    Option<long[]> nodesOption = new("-n", "--nodes")
    {
        Arity = ArgumentArity.OneOrMore,
        Description = "Numerical node ids",
        IsRequired = true,
    };

    RootCommand rootCommand = new("A test app for saving node ids");
    rootCommand.AddGlobalOption(nodesOption);
    await rootCommand.InvokeAsync(args);

    Console.WriteLine("Why is this line printed?");
}

然而，当我调用上面的代码而不指定任何选项时，它确实会打印警告Option '-n' is required.，但执行不会中止。

isRequired当缺少全局选项时，应用程序不应该以代码 1 退出吗？

如果不应该，如何更改应用程序行为以使用代码 1 退出？

我还想知道如何指定 a作为选项的默认值，我在System.CommandLinenew[] { 1234567890 }文档中找不到它。

下面是我的测试用例及其输出的屏幕截图：