ReactstrapCollapseコンポーネントを水平方向に拡張する方法は？

そこで、水平方向または垂直方向の両方で折りたたむことができるコンポーネントを作成しました。垂直方向の折りたたみはまだテスト中ですが、水平方向の折りたたみでも機能します。

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にアクセスできるようにします。そして、このDIV内のこのコンポーネントに渡されたすべての子をレンダリングします。

展開するか折りたたむかを制御するためにthis.setState、親コンポーネント内でTRUEからFALSEに変更されるpropisOpenがあります。

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;
}

ターゲット属性は、属性を設定したのと同じDIVに設定されrefます。propverticalがtrueに設定されている場合、ターゲットattは_collapseV、コンポーネントを垂直方向に折りたたむように変更されます。

アニメーションをトリガーするには、insideと呼ばれる関数の値max-widthまたは関数max-height内を変更します。assigncomponentDidUpdate

唯一の欠点は、このコンポーネント内でレンダリングされ、小道具に設定されるコンテンツの最大長（幅または高さ）を知っている必要があることですelementMaxLength。同じ値である必要はありませんが、elementMaxLengthはコンテンツの長さよりも大きくする必要があります。

以上です。

これが最善の方法かどうかは本当にわかりませんし、改善の余地はたくさんあると確信しています。しかし、私は良い解決策だと思います。問題なく動作し、パッケージをインストールする必要はありません。

前にも言ったように、垂直方向に折りたたむにはまだテストが必要ですが、要点は水平方向に折りたたむものを作成することでした。