Компонент React Link занимает всю ширину div

Question

У меня есть компонент React Link, который содержит созданный мной пользовательский компонент Button. Ширина компонента Link автоматически устанавливается так, чтобы соответствовать его родительскому div, делая области интерактивными, которых не должно быть. Я испортил код, и у меня возникла идея поместить ссылку в промежуток, в результате чего получился этот код.

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

Это сработало отлично, но я только вроде понимаю почему. Может кто-нибудь объяснить это полностью? Почему была исправлена ​​интерактивная область для компонентов "Ссылка" и "Кнопка"?

Answer 1

Компонент

Link из реактивного маршрутизатора обертывает все, что вы передаете как children, в вашем примере Button компонент, с элементом <a></a>. Этот элемент по умолчанию display:block, что означает, что он займет всю ширину родительского элемента, содержащего Link компонент.

Таким образом, вам нужно либо ограничить родительский компонент желаемой шириной, либо передать класс или стиль Link компонент и стилизуйте его таким образом:

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

Answer 2

Link отображает тег <a>, который по умолчанию не содержит содержимого внутри него. Итак, когда вы размещаете кнопку, я считаю, что кнопка имеет стиль display: block. Таким образом, кнопка отображается как заблокированный элемент относительно родительского элемента тега <a>. Установите стиль link на display: inline-block. В этом случае тег будет содержать кнопку, а также будет находиться в элементе встроенного блока относительно его родительского .

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