tips +侧风(弹出菜单)-请求组件重构提示？

Question

我完成了基于headlessui和popover的第一个组件(链接：https://headlessui.com/react/popover)。

我询问了我们的社区，看看我的组件：

https://loquacious-sherbet-abe60f.netlify.app/

• git：https://github.com/robokonk/tailwind-menu/blob/main/src/components/Header.tsx

• live

我应该重构哪些元素以及如何重构(我感谢关于所选提示的提示和文档链接)

此外，我只想简单地使用第4行到第94行，并将这个函数放在一个json中，例如：

const iconData = [
  iconOne: `<svg
      xmlns="http://www.w3.org/2000/svg"
      className="w-6 h-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M4 6h16M4 12h16M4 18h16"
      />
    </svg>`
]

但是我不能渲染这个图标，我该怎么做呢？

我还看到，我可以简化它(第140至147行)：

interface itemProps {
  name: string;
  href: string;
  description: string;
  icon: any;
}

function menuPosition(item: itemProps, index: number) {

并准备如下界面：

interface menuProps {
  index:number,
  item: itemProps
}

interface itemProps {
  name: string;
  href: string;
  description: string;
  icon: any;
}

但是，当我更改代码时，我从行中获得信息: 192：

return menuPosition(item, index);

Expected 1 arguments, but got 2.ts(2554)

• 我该怎么修理它？

Answer 1

不确定如何将svg移动到字符串中简化代码。例如，您可以将一个公共部分放入GenericIcon函数中：

function GenericIcon(path: string) {
  return () => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="w-6 h-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path strokeLinecap="round" strokeLinejoin="round" d={path} />
    </svg>
  );
}

然后声明图标：

const IconMenu = GenericIcon("M4 6h16M4 12h16M4 18h16");
const IconMenuClose = GenericIcon("M6 18L18 6M6 6l12 12");
...

像这样使用它们：

<IconMenu />

关于menuPosition的问题。我的意见是:最好还是保持原样。

这个组件看起来很酷！