如何用 reactjs 折叠 div？答案

【问题标题】：How to collapse a div with reactjs?如何用 reactjs 折叠 div？
【发布时间】：2017-03-30 11:38:55
【问题描述】：

我正在使用 reactjs 和 bootstrap v 3.0，但我在其中找不到任何折叠类，所以我在我的 scss 中定义了它。问题是togglebutton不起作用或者在div上没有触发toggleevent：

 toggle(e) {
        console.log('testing e',e)
        if (e.target.class === 'collapse') {
            e.target.className = 'collapse.in'
        } else {
            e.target.className = 'collapse'
        }
    }

这是我的按钮：

<button className="btn btn-block" onClick={() => {
               this.toggle.bind('demo')
               }}>
     Open/close
</button>

如何将className 从collapse 更改为collapse.in，反之亦然？这是一个代码示例：Codepen

【问题讨论】：

不应该是e.target.className = 'collapse in'

标签： javascript reactjs twitter-bootstrap

【解决方案1】：

你的 SCSS 和你的 HTML 都很好，问题在于你如何使用 React。

组件的打开/关闭状态应该用this.state 中的属性表示，toggle() 函数应该简单地切换该属性。最后，render() 函数应该负责在它呈现的 <div> 上设置正确的 CSS 类。

这是你的Codepen updated with my suggestions。

我做了什么：

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

【讨论】：

太棒了，当我得到触发渲染的道具变化时，如何/在哪里将状态更改为打开？那我想打开面板。
如果你想使用props而不是state打开面板，只需在render()函数中使用this.props而不是this.state。请注意，在这种情况下，您不需要在构造函数中设置初始状态，也不需要 toggle() 方法，因为父组件负责更改子组件的 props。
我想使用道具和状态。我需要阅读 componentDidMount 事件中的道具吗？但这只会在初始化期间触发一次？
Props 始终在 this.props 中可用，在组件的任何地方。我建议您阅读有关 React 的教程。 Props 和 state 的使用是 React 的基础，从你的评论看来你对它们是什么以及它们如何工作感到困惑。
我稍微更改了您的代码笔以向您展示我的意思：codepen.io/gekkerkanniet/pen/oYzGmN?editors=1111。现在它不再关闭了。

【解决方案2】：

还有一个名为“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

【讨论】：