React Link 组件跨越 div 的整个宽度

Posted 2023-03-06

【中文标题】React Link 组件跨越 div 的整个宽度

【英文标题】：React Link component spans the entire width of the div

【发布时间】：2020-11-02 14:07:46

【问题描述】：

我有一个 react Link 组件，其中包含我制作的自定义 Button 组件。 Link 组件的宽度会自动设置为适合其父 div，从而使不应点击的区域成为可点击区域。我弄乱了代码，并想到将 Link 放入 Span 中，从而生成此代码。

<span><Link to="/"><Button buttonStyle="primary">Create Account</Button></Link></span>

这很有效，但我只是有点明白为什么。有人可以完整解释一下吗？为什么这会修复链接和按钮组件的可点击区域？

【问题讨论】：

将链接设置为：display: inline-block - 更多信息在这里***.com/questions/34766562/…

【参考方案1】：

Link 呈现一个<a> 标签，默认情况下不包含其中的内容。因此，当您放置按钮时，我相信该按钮的样式为display: block。因此，按钮显示为相对于 <a> 标记的父级的阻塞元素。将link 的样式设置为display: inline-block。在这种情况下，标签将包含按钮，并且相对于其父级位于内联块元素中。

<Link to="/" style=display: 'inline-block'>
    <Button buttonStyle="primary">Create Account</Button>
  </Link>

【参考方案2】：

来自反应路由器的Link 组件将您传递为children 的所有内容包装起来，在您的示例中为Button 组件，带有<a></a> 元素。该元素默认为display:block，这意味着它将占据拥有Link 组件的父元素的全宽。

因此，您需要将父组件限制为所需的宽度，或者将类或样式传递给Link 组件并以这种方式设置样式：

<span>
  <Link to="/" style=width: '100px'>
    <Button buttonStyle="primary">Create Account</Button>
  </Link>
</span>