Question

我已经对此进行了一段时间的研究，并遵循了以下地方的文档：

This issue on github带我到semantic-ui-react documentation on Augmentation，

和setting up route config with sub-routes上的react-router文档。

我的路由配置似乎有效，但目前还不清楚具体实现组件扩充的位置。

我尝试了<Card.Group items={items} as={Link} to={items.map((item,i)=>(item.href))} />，并尝试将as={Link}置于道具本身，面对一堆错误，最终导致可怕的失败导致可怕的Maximum call stack size exceeded! < / p>

目前，我只是使用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} />

使用React-Semantic-UI CardGroups配置React Router SubRoutes

1 个答案: