配置陣營路由器子路徑與陣營語意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} />