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

【问题标题】：React Link component spans the entire width of the divReact Link 组件跨越 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 - 更多信息在这里stackoverflow.com/questions/34766562/…

标签： javascript reactjs react-router-dom

【解决方案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>

【讨论】：