Question

我已经使用 semantic-ui-react 库在我的react应用中定义了移动视图的模式。模态由一堆 Segment 标签组成，这些标签使用react-router中的 Link 标签路由到特定页面。该功能按预期工作正常，但我在UI中遇到问题。段标签占用了屏幕的整个可用宽度，但是 Link 标签仅占用了包含文本的空间。现在，如果我单击段，则什么也不会发生，但是当我单击该段中的文本时，它将重定向到所需的页面。显然，这里的问题是 Link 标记转换为 anchor 标记时，该标记仅占用文本周围的空间，而 Segment 标记则转换为 div ，它占据了屏幕的整个宽度。

我尝试在细分标签的链接标签中使用{{display：inline-block}}，就像人们在< strong> div ，但这对我不起作用。有什么建议吗？

这是我当前拥有的代码：

<Modal 
        trigger={<Button color="black" onClick={open}><Icon name="bars"/></Button>}
        open={modalOpen}
        onClose={close}
        basic
        size='small'>

        <Modal.Content>
          <Modal.Description>
            <Segment>
              <Link onClick={close} to='/login' style={{ color: '#000', display: 'inline-block' }}>{tt('navigation.login')}</Link>
            </Segment>
          </Modal.Description>
        </Modal.Content>

这是我得到的示例模式： example modal segment

Answer 1

如果要使整个段成为链接，则需要使用as道具。

<Segment 
  as={Link} 
  style={{display:'block'}} 
  to='your/route/here' 
/>

来自<segment>中来自react-router的<link />来自语义ui-react

1 个答案: