代码之家 › 专栏 › 技术社区 › Vencovsky

如何使链接适合其内部的组件?

react-router reactjs css javascript

Vencovsky · 技术社区 · 6 年前

我有:

<div classname=“flexbox”>
<h4>Rampa de Cores</h4>
<link to=“/new”classname=“link”>
<customButton label=“adicionar”classname=“addButton”/>
L/Link & GT;
&L/DIV & GT;
< /代码> 

和<customButton/>返回


<div>
<button classname=this.props.classname>this.props.label</button>
&L/DIV & GT;
< /代码> 

问题是:



我用红色方块标记的所有区域都是可点击的,并触发链接/>但我需要使其仅适合按钮区域。


我试过的:


我在链接中查找了如何使DIV适合它的内容。


.link{
显示:内联块;
}
< /代码> 

但不起作用。


我需要:


如何使适合它的内容?

或采用更好的触发方式。<link/>using the button.



以及<CustomButton />收益率

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


问题:



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

我尝试过:

我在找如何使一个分区适合它的内容,在.link我有

.link {
  display: inline-block;
}


但没用。

我需要什么:


如何制作<链接/gt;适合它的内容?
或者做一个更好的触发方式<链接/gt;使用按钮。

3 回复 | 直到 6 年前

Charlie 6 年前

React路由器为组件提供历史支持。

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

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

Pragati Singh 6 年前

不应将按钮用作链接的子级。相反,您可以使用按钮并在单击按钮时触发状态更改或重定向。如果新路由是用react router dom的路由声明的,则可以使用以下代码:

 <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>

如果当前组件没有用路由定义,则必须使用 withRouter 从 react-router-dom 访问历史属性。

vssadineni 6 年前

您可以使用下面的flex box样式,或者简单地制作。链接显示:块;宽度:100%;

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

就高度而言,如果parent.flexbox display属性为flex,则高度将自动拾取。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

Mass · 如何在Tailwind CSS v4中创建配置

3 月前

magenta placenta · 将css变量合并为一个变量

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

3 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

3 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前