因此 ， 我 创建 了 一 个 可以 水平 或 垂直 折叠 的 组件 。 垂直 折叠 仍 在 测试 中 ， 但 它 将 适用 于 水平 折叠 。

export default class Collapse extends Component {

    static props = {       
        isOpen: PropTypes.bool.isRequired,        
        vertical: PropTypes.bool,
        elementMaxLength: PropTypes.string,

        onOpen: PropTypes.func,
        onClose: PropTypes.func,
    }

    static defaultProps = {
        vertical: false,
        elementMaxLength: '300px',
        onOpen: () => console.log('Opened'),
        onClose: () => console.log('Closed'),
    }

   constructor(props) {
       super(props);

       this.state = {
        cssTarget: '_collapseH'
       }
   }

   componentDidMount() {
        if (this.props.vertical)
            this.setState({cssTarget: '_collapseV'})

        if (this.props.isOpen)
            this.collapse();
   }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevProps.isOpen !== this.props.isOpen)
            this.collapse();
   }

   collapse() {
    var content = this.refs.collapseDiv;
    if (content)
       if (this.decide(content))
          this.close(content)
       else
          this.open(content)    
   }

   decide(content) {
      if (this.props.vertical)
        return content.style.maxHeight;

      return content.style.maxWidth;
   }

   open(content) {
      this.assign(content, this.props.elementMaxLength);      
      this.props.onOpen();
   }

   close(content) {
      this.assign(content, null)
      this.props.onClose();
  }

  assign(content, value) {
    if (this.props.vertical)      
      content.style.maxHeight = value;
    else
      content.style.maxWidth = value;
  }

   render() {
    return (
          <div ref='collapseDiv' target={this.state.cssTarget}> 
            {this.props.children}
          </div>
    );
  }
}

中 的 每 一 个
所以 基本 上 我们 用 一 个 引用 来 呈现 一 个 DIV ， 这样 我们 就 可以 在 我们 的 this.refs 组件 中 访问 它 。 我们 在 这个 DIV 中 呈现 传递 给 这个 组件 的 所有 子 级 。
为了 控制 是否 应该 展开 或 折叠 ， 我们 有 属性 isOpen ， 它 在 父 组件 中 通过 this.setState 从 TRUE 变为 FALSE 。
当 我们 在 父 对象 中 使用 this.setState 时 ， 它 将 触发 父 对象 的 重新 渲染 ， 同时 也 会 触发 Collapse 组件 的 重新 渲染 ， 这 也 将 触发 componentDidUpdate ， 我们 将 在 此处 开始 动画 。
为了 控制 动画 ， 我 使用 CSS ：

div[target='_collapseV'] {
  display: flex;
  flex: 1;  
  overflow: hidden;
  background-color: maroon;

  max-height: 0;
  transition: max-height 1s ease-out;
}

div[target='_collapseH'] {
  display: flex;
  flex: 1;
  overflow: hidden;
  background-color: maroon;

  max-width: 0;    
  transition: max-width 1s ease;
}

格式
target 属性 在 我们 设置 ref 属性 的 同一 DIV 中 设置 。 如果 prop vertical 设置 为 true ， 则 我们 的 target att 将 更改 为 _collapseV ， 使 组件 垂直 折叠 。
为了 触发 动画 ， 我们 在 assign 函数 中 更改 max-width 或 max-height 的 值 ， 该 函数 在 componentDidUpdate 中 调用 。
唯一 的 缺点 是 ， 您 必须 知道 在 此 组件 中 呈现 的 内容 的 最 大 长度 （ 宽度 或 高度 ） ， 并 在 prop elementMaxLength 中 设置 。 它 不必 是 相同 的 值 ， 但 elementMaxLength 应该 大于 内容 长度 。
就是 这样 。
我 真 的 不 知道 这 是否 是 最 好 的 方法 去 ， 我 敢 肯定 ， 有 很 大 的 改进 空间 . 但 我 认为 这 是 一 个 很 好 的 解决 方案 ， 工作 正常 ， 你 不必 安装 任何 软件 包 .
正 如 我 之前 所 说 的 垂直 折叠 仍然 需要 一些 测试 ， 但 重点 是 创造 一些 水平 折叠 的 东西 。