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

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

  •  0
  • 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{
    显示:内联块;
    }
    < /代码> 
    
    

    但不起作用。

    我需要:

    1. 如何使适合它的内容?
    2. 或采用更好的触发方式。<link/>using the button.

    以及<CustomButton />收益率

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

    问题:

    buttonImage

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

    我尝试过:

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

    .link {
      display: inline-block;
    }
    

    但没用。

    我需要什么:

    1. 如何制作<链接/gt;适合它的内容?
    2. 或者做一个更好的触发方式<链接/gt;使用按钮。
    3 回复  |  直到 6 年前
        1
  •  1
  •   Charlie    6 年前

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

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

    <div className="flexBox">
        <h4>Rampa de Cores</h4>
        <CustomButton 
          onClick={() => this.props.history.push('/new')} 
          label="Adicionar" 
          className={"addButton"}
        />
    </div>
    
        2
  •  1
  •   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 访问历史属性。

        3
  •  0
  •   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,则高度将自动拾取。