react实现的面板组件

先上图

具体的react配置，在这就说了。这块就这个面板组件，react的实现思路提供给大家，因水平有限，不足之处还望大家指导。

先说一下传统的思路：ul了标签里嵌套li标签，li标签里在嵌套div或ul标签将其隐藏，通过鼠标点击显示与隐藏。

react的实现思路：

HeaderUlLi和Detail是父子组件，HeaderUlLi是父组件，Detail是子组件。实现这个鼠标点击，显示与隐藏的实质是通过改变父组件的状态，决定是否渲染子组件，这个涉及到了父子组件通信。父组件通过属性向下传递值，子组件通过this.props访问父组件传递过来属性的值。

具体的代码由于文件太多，在这就不上传了。大家可以去我的github上下载下来，研究一下。github地址：https://github.com/whatispig