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

Question

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

每个菜单都有带有图标和组件按钮的链接来打开它。

将多个组件作为链接数组传递，然后像本例中那样使用贴图进行渲染，这是个好主意吗？如果没有，还有什么选择？

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组件是img标记，那么您应该只传递src，alt。

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

一般来说，如果你的组件有相同的部件，那么试着干燥(不要重复(，并且只传递组件的动态部分。但有时您没有其他方法，传递组件是最好的解决方案。