Javascript 如何访问React中的子元素属性？

我正在React Redux上创建多级手风琴菜单组件

class MultiLevelAccordianMenu extends PureComponent {
    constructor(props){
        super(props);
        this.toggleList = this.toggleList.bind(this);

    }
    toggleList(event){
        console.log(event)
    }
    render(){
        return( <ul className="cd-accordion-menu animated">
            <li className="has-children" onClick={this.toggleList}>
                <input type="checkbox" name ="group-1" id="group-1" defaultChecked />
                <label htmlFor="group-1">Group 1</label>

                <ul>
                    <li className="has-children">
                        <input type="checkbox" name ="sub-group-1" id="sub-group-1" />
                        <label htmlFor="sub-group-1">Sub Group 1</label>

                        <ul>
                            <li><a href="#0">Image</a></li>
                            <li><a href="#0">Image</a></li>
                            <li><a href="#0">Image</a></li>
                        </ul>
                    </li>
                 </ul>
             </li>
          </ul>        );
    }
  }
export default MultiLevelAccordianMenu;

class多级菜单扩展了PureComponent{
建造师（道具）{
超级（道具）；
this.toggleList=this.toggleList.bind（this）；
}
切换列表（事件）{
console.log（事件）
}
render（）{
返回（


第一组


第1分组








）；
}
}
导出默认多级菜单；

单击父“li”元素时，我想切换子“ul”元素。 我已经写了一个切换函数。在这种情况下，如何访问和设置子属性以使其隐藏和显示

单击即可使用和更改它。只需将子元素的className设置为动态：

class MultiLevelAccordianMenu extends PureComponent {
     constructor(props){
        super(props);
        this.state = {
          isActive : false
        };
        this.toggleList = this.toggleList.bind(this);
     }
     toggleList(event){
        this.setState({isActive: !this.state.isActive});
     }
    render(){
        ....
        <li className="has-children" onClick={this.toggleList}>
        .....               
        <ul className={this.state.isActive ? "active" : ""}>
          ....

}

如果要添加动画，可以使用css规则：

---

你在用jquery吗？不，我没有用jquery。谢谢@Roman Romanovsky。我会试试这个，但这只对一个孩子有效。如果我们想为父母、子女和孙子孙女实现这一目标，我们该怎么做？例如：render（）{..

• • <

    ul{
      visibility: hidden;
    }
    .active{ 
      visibility: visible;
    }
    

    ul{
       max-height: 0;
       transition: max-height 0.15s ease-out;
       overflow: hidden;
    }
    ul.active {
       max-height: 500px;
       transition: max-height 0.25s ease-in;
    }