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

Question

我已经研究了一段时间,并遵循以下地方的文档:

github上的这个问题引导我对Augmentation的语义 - ui-react文档,

以及有关使用子路由设置路由配置的react-router文档.

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

我已经尝试过<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} />