javascript - 如何使链接适合其内部的组件？

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>

问题:

我用红色方 block 标记的所有区域都是可点击的并触发 <Link />但我需要让它只适合按钮区域。

我尝试了什么:

我在 .link 中寻找如何使 div 适合它的内容我有

.link {
  display: inline-block;
}

但没用。

我需要什么:

1. 如何制作<Link />适合它的内容？
2. 或者制定更好的触发方式<Link />使用按钮。

Answer 1

React Router 为组件提供了一个 history prop。

您可以替换您的链接并在按钮中包含一个 onClick。

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