Question

我有两个菜单组件：配置文件菜单和主菜单。

每个菜单都带有带有图标和组件按钮的链接，以将其打开。

像此示例中那样，将多个组件作为links数组传递并用map呈现是个好主意吗？如果没有，还有什么选择？

const Icon = () => <div>1</div>

const Icon2 = () => <div>2</div>

const links = [{ href: '/', name: 'MainPage', icon: Icon }, { href: '/test', name: 'Test', icon: Icon2 }]

const MainMenu = () => {
  return (
    <Navigation side='left' links={links}>
      <img src='smt..' />
    </Navigation>
  )
}

const Profile = () => {
  return (
    <Navigation side='right' links={links}>
      <img src='smt..' />
    </Navigation>
  )
}

const Navigation = ({ side, links, children }) => {
  const menuRelayRef = useRef(null) // to close menu on page click

  // some logic

  return (
    <Fragment>
      {cloneElement(children, { ref: menuRelayRef })}

      <div show={show} side={side}>
        {links.map((l) => {
          const Icon = l.icon // is it ok?

          return (
            <div>
              <button>{l.name}</button>
              <Icon />
            </div>
          )
        })}
      </div >
    </Fragment>
  )
}

Answer 1

我认为这取决于您的Icon组件：

如果Icon组件是img标签，那么您应该只传递src，alt。

如果Icon组件是SVG图标，那么您应该传递SVG图标组件。

通常，如果您的组件具有相同的零件，请尝试进行干燥（不要重复自己），并且只传递组件的动态部分。但是有时您别无选择，传递组件是最好的解决方案。

将多个组件作为道具传递是个好主意吗？

1 个答案: