如何使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 />，但我需要使其仅适合按钮区域。

我尝试过的事情：

我在.link中寻找了如何使div适合其内容

.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

您不应将button用作Link的子级。相反，您可以使用按钮并在单击按钮时触发状态更改或重定向。如果新路由是用react-router-dom的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

您可以使用以下弹性框样式，也可以简单地使.link display：block;宽度：100％;

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

就高度而言，如果父.flexbox显示属性为flex，则将自动选择高度。