你的SCSS和HTML都很好，问题在于你如何使用React。
组件的打开/关闭状态应该用this.state中的属性表示，toggle()函数应该简单地切换该属性。最后，render()函数应该负责在它呈现的<div>上设置正确的CSS类。
这是你的Codepen updated with my suggestions
我所做的：

• 我在组件构造器中定义了一个初始状态：如您所见，我最初将open属性设置为false;
• 我重写了toggle()方法，使用this.setState()来切换open属性的值;
• 我修改了render()函数，根据状态生成<div>的类名。如果组件状态为open，则类名为"collapse in"，否则仅为"collapse"。

还有一个名为“react-bootstrap”的库，它允许将react与bootstrap集成。他们有一个非常简单的例子，使可折叠的div，我分享的代码，我已经改变了根据我想要的。
您可以在代码中的任何地方使用此组件。这将返回一个带有可折叠div的按钮。

import React, {Component} from 'react'
import {Button, Collapse} from 'react-bootstrap'

class Test extends Component{
    state={ 
        open:false
       }

    render(){
      return(
        <div className= "container">
           <Button className="btn" onClick={!this.state.open}>
               Collapse Div
           </Button>

           <Collapse in={this.state.open}>
               <div>
                  <p>Content when the button is clicked</p>
               </div>
           </Collapse>
        </div>
        );
       }
}

export default Test

有非常好的库，我不建议重新发明轮子，但使用像react-collapsible这样的东西，你也会有很大的灵活性。
像这样安装：npm i react-collapsible
然后像这样使用：

import React from 'react';
import Collapsible from 'react-collapsible';

const YourComponent = () => {
  return (
    <Collapsible trigger='Open' triggerWhenOpen='Close'>
      <button className="btn btn-block" onClick={() => {this.toggle.bind('demo') }}>
        This button collapses
      </button>
    </Collapsible>
  );
};
export default YourComponent;