<Link> from react-router inside <Segment> from semantic-ui-react答案

【问题标题】：<Link> from react-router inside <Segment> from semantic-ui-react<Link> from react-router inside <Segment> from semantic-ui-react
【发布时间】：2018-08-09 09:45:47
【问题描述】：

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

我尝试在 Segment 标签内的 Link 标签内使用 {{display:inline-block}}，就像人们在 anchor 标签内使用 anchor 标签一样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

【问题讨论】：

您的预期行为是什么？您已经描述了当前的行为，但元素应该如何表现？
对不起，如果我不清楚，我希望模态中的 Segment 可以完全点击，而不仅仅是文本所在的位置。

标签： reactjs semantic-ui-react

【解决方案1】：

如果你想让整个片段成为链接，你需要使用as 属性。

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

【讨论】：

您需要为我分享您的标记，以查看您目前必须能够对此发表评论的内容。上面的示例基本上只是将段呈现为链接，而不是您当前呈现为链接的任何内容。如果您使用 JSX 示例更新您的问题，我可以更好地回答这个问题。
我在图片中添加了代码 sn-p 以帮助您更好地了解我要做什么。
所以你说你不希望 Segment 本身成为链接，并为你的关闭事件处理程序设置 onClick 事件，而是希望拥有“行”的完整宽度您认为文本需要改为可点击？默认情况下，锚点<a> 标记的display 类型为inline。如果您将其更改为inline-block，它只会添加一些块级属性，但仍不会占用父容器的全部宽度。如果您将 display: block 作为您的样式添加到该链接，则它将使 <a> 标记占据父级的整个宽度。
请注意，段填充仍然不会链接或关闭您的模式。这可能会使用户感到困惑。您可能仍希望将您的 onClick、as 和 to 道具移动到细分。
不，我只是希望段标签的行为类似于链接标签，但保持其原始尺寸。我按照您在原始答案中提到的那样进行了尝试，并且该段缩小到链接标签的尺寸。我希望段标记可用的整个默认空间表现得像链接。