如何水平展开 Reactstrap Collapse 组件？

Question

默认情况下，reactstrap 折叠组件总是垂直折叠，关于使其水平折叠的任何提示？

也许我遗漏了什么... https://reactstrap.github.io/components/collapse/

Answer 1

因此，我创建了一个可以水平或垂直折叠的组件。垂直收起还在测试中，但是水平收起会起作用。

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

目标属性设置在与我们设置 ref 属性相同的 DIV 中。如果道具 vertical 设置为 true，那么我们的目标 att 将变为 _collapseV 使组件垂直折叠。

为了触发动画，我们在 assign 函数中更改 max-width 或 max-height 的值，该函数在 componentDidUpdate.

中调用

唯一的缺点是您必须知道内容的最大长度（宽度或高度）在该组件内渲染，并在 prop elementMaxLength 中设置。它不必是相同的值，但 elementMaxLength 应该大于内容长度。

就是这样。

我真的不知道这是否是最好的方法，我确信还有很大的改进空间。但我认为这是一个很好的解决方案，工作正常而且您不必安装任何软件包。

正如我之前所说，垂直折叠仍然需要一些测试，但重点是创建水平折叠的东西。

如何水平展开 Reactstrap Collapse 组件？

How to expand Reactstrap Collapse component horizontally?

collapse

reactjs

reactstrap