配置阵营路由器子路径与阵营语意UI CardGroups

Question

我研究这一段时间，并遵循从以下位置的文档：

This issue on github导致我semantic-ui-react documentation on Augmentation，

和反应路由器关于setting up route config with sub-routes的文档。

我的路由配置似乎工作，但不清楚在哪里具体实现组件增强。

我已经试过<Card.Group items={items} as={Link} to={items.map((item,i)=>(item.href))} />，以及试图把在道具本身as={Link}，并且都面临着一堆错误，并最终递归衰竭导致可怕的Maximum call stack size exceeded!

现在，我只是硬编码带有react-router的组件路径。一种功能性的方法会更加优雅，而且更多的反应 - 这就是我所追求的！

Answer 1

您试图将扩充应用于Card.Group，而实际上您希望将其应用于Card。

的子组件API，以便正确的用法是：

<Card.Group> 
    <Card as={Link} to='/foo' /> 
    <Card as={Link} to='/bar' /> 
</Card.Group> 

的速记API正确的用法是：

const items = [ 
    { as: Link, content: 'Foo', to: '/foo' }, 
    { as: Link, content: 'Bar', to: '/bar' }, 
] 

<Card.Group items={items} />