react求助一个问题

Question

实现效果是一个菜单栏的点击时展开子集菜单，再点击缩起。

而且不止一个菜单。

代码：

//点击事件

 clickFunc = (index) => {

       

    }

    

// render...  

 {

                            list.map((item, index) => {

                                return (

                                    <div key={index} className="menuBlock">

                                        <div className="blockTitle" onClick={this.clickFunc.bind(this, index)} ref={'block'+index}>{item.blockTitle}</div>

                                        <div className='blockList on' >

                                            <ul>

                                                {

                                                    item.arr.map((item, index) => {

                                                        return (

                                                            <li key={index}><a href={item.link} target="_blank">{item.text}</a></li>

                                                        );

                                                    })

                                                }

                                            </ul>

                                        </div>

                                    </div>

                                )

                            })

                        }

                        

**目前我是打算通过增删class名字来实现，但是这样我得拿到真实的dom，所以我想通过ref来拿到当前点击的dom，再通过它去找兄弟节点'blockList'，给它添加class。

这里我用index来标记不同的ref。

class名为‘blockList ’的是需要展开项**

问题：在点击方法里我该怎么去拿到拼接了下标标量的ref值，或者有什么更好的方法来实现这个效果？