先上图
具体的react配置,在这就说了。这块就这个面板组件,react的实现思路提供给大家,因水平有限,不足之处还望大家指导。
先说一下传统的思路:ul了标签里嵌套li标签,li标签里在嵌套div或ul标签将其隐藏,通过鼠标点击显示与隐藏。
react的实现思路:
HeaderUlLi和Detail是父子组件,HeaderUlLi是父组件,Detail是子组件。实现这个鼠标点击,显示与隐藏的实质是通过改变父组件的状态,决定是否渲染子组件,这个涉及到了父子组件通信。父组件通过属性向下传递值,子组件通过this.props访问父组件传递过来属性的值。
具体的代码由于文件太多,在这就不上传了。大家可以去我的github上下载下来,研究一下。github地址:https://github.com/whatispig