Question

我有一个如下组件：

toggleRegistration（）{

    this.setState({
        ...this.state,
        showFullSizedImage: true,
        showRegistration: !this.state.showRegistration,
    })

}    
...
<div className="div-one">
    <If condition={!this.state.showRegistration && !this.state.showLogin}>

        {/* Main registration button */}
        <div className="register-button">
            <Button
                backgroundColor="red"
                value="Get Started"
                minWidth={220}
                minHeight={50}
                fontSize={24}
                borderRadius={60}
                onClick={() => this.toggleRegistration()}>
            </Button>
        </div>
    </If>
</div>

对应的css：

.div-one {

  background: url("../../../assets/images/manhattan-min.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  position: absolute;
  width: 100%;
  min-height: 500px;
  min-height: 100vh;

}

当用户点击按钮即toggleRegistration（）方法时，我想将div-one的宽度减小到50％。

我该怎么做？

Answer 1

您可以向div添加条件style属性

<div className='div-one' style={{width: this.state.showRegistration ? '50%' : '100%'}}>

Answer 2

我建议使用classnames包并添加额外的css规则：

.div-one {
  background: url("../../../assets/images/manhattan-min.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  position: absolute;
  width: 100%;
  min-height: 500px;
  min-height: 100vh;
}

.div-one.half-width {
  width: 50%;
}

然后在您的脚本标记中，根据相关的状态有条件地添加half-width类：

import classNames from 'classnames';
...
<div className={classNames("div-one", { "half-width": this.state.showRegistration })>
    <If condition={!this.state.showRegistration && !this.state.showLogin}>

        {/* Main registration button */}
        <div className="register-button">
            <Button
                backgroundColor="red"
                value="Get Started"
                minWidth={220}
                minHeight={50}
                fontSize={24}
                borderRadius={60}
                onClick={() => this.toggleRegistration()}>
            </Button>
        </div>
    </If>
</div>

在函数调用上反应更改样式

2 个答案: