Как сделать так, чтобы Link соответствовал компоненту, который находится внутри него?

Question

Что у меня есть:

<div className="flexBox">
    <h4>Rampa de Cores</h4>
    <Link to={"/new"} className="link">
        <CustomButton label="Adicionar" className={"addButton"}/>
    </Link>
</div>

И <CustomButton /> возвращает

<div>
    <button className={this.props.className}>{this.props.label}</button>
</div>

Проблема:

Вся область, которую я пометил красным квадратом, кликабельна и вызывает <Link />, но мне нужно, чтобы она соответствовала только области кнопки.

Что я пробовал:

Я искал, как сделать div подходящим для его содержимого, в .link у меня есть

.link {
  display: inline-block;
}

, но он не работал.

Что мне нужно:

1. Как сделать так, чтобы <Link /> соответствовало его содержанию?
2. Или сделать лучший способ запуска <Link /> с помощью кнопки.

Answer 1

React Router предоставляет историческую опору для компонентов.

Вы можете заменить свою ссылку и включить кнопку onClick.

<div className="flexBox">
    <h4>Rampa de Cores</h4>
    <CustomButton 
      onClick={() => this.props.history.push('/new')} 
      label="Adicionar" 
      className={"addButton"}
    />
</div>

Answer 2

Вы не должны использовать кнопку как дочерний элемент Link. Вместо этого вы можете использовать кнопку и инициировать изменение состояния или перенаправление при нажатии кнопки. Если новый маршрут объявлен через Route-router-dom's Route, вы можете просто использовать следующий код:

 <div className="flexBox">
        <h4>Rampa de Cores</h4>
        <Link to={"/new"} className="link">
            <CustomButton label="Adicionar" className={"addButton"}
onButtonClick={()=>this.props.history.push('/new')}/>
        </Link>
</div>
  <button
 onClick={this.props.onButtonClick}
>{this.props.label}</button>

Если ваш текущий компонент не определен с Route, вы должны использовать withRouter из react-router-dom, чтобы получить доступ к истории.

Answer 3

вы можете использовать ниже стили Flex Box или просто сделать .link display: block; ширина: 100%;

.link{
    display:flex;
    flex-flow:row wrap;
    flex-basis:50%;
    min-width:50%;
    line-height:normal;
}

Что касается высоты, если родительское свойство отображения .flexbox имеет значение flex, то высота будет выбрана автоматически.