css - Reactjs 和 SCSS - 如何写高度 : selfheight x 2

Question

我想在每次点击时将 div 的高度加倍。

我想在单击按钮时将额外的 CSS 类应用到 div。 CSS 概念将是这样的:

#divToBeDoubled {
    height: 100px;

    &.doubleHeight{
        height: selfHeight*2
    }
}

如何使用 Reactjs 和 SCSS 实现这一目标？

Answer 1

我认为如果你想改变组件状态的 css 值，你需要移动你想要改变的属性到你的组件或使用 JSS...

要移动渲染中的属性，您可以这样做:

class MyComponent extends React.Component{

  state = {
    divHeight : 100
  }

  doubleSize = ()=>{
    this.setState({ divHeight : this.state.divHeight * 2 })
  }

  render() {

    const style = {
      height: this.state.divHeight
    };

    return (
      <div style={style} onClick={this.doubleSize}>Content</div>
    );
  }

}