用ReactJs写一个简单的手风琴菜单效果

最新推荐文章于 2024-05-17 09:47:06 发布

兜茄破

最新推荐文章于 2024-05-17 09:47:06 发布

阅读量5.5k

点赞数

分类专栏： Javascript 文章标签： React 手风琴效果

本文链接：https://blog.csdn.net/dullchap/article/details/52472446

版权

Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ReactJs除了利用Virtual DOM大大提高了页面渲染速度。

本身基于组件的编码方式也很优雅，组件层次结构比较清晰，挺易于维护的。

下面用ReactJs写一个简单的手风琴菜单效果，仅供学习交流。

完整源码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <style type="text/css">
        .hidden{
            display:none;
        }
    </style>
  </head>
  <body>
    <div id="myComponent"></div>
    <script type="text/babel">

        //菜单数据
        var menuDatas = [
            {id:"010",  label:"ANIMAL",     children:[
                {id:"011",  label:"dog"},
                {id:"012",  label:"cat"},
                {id:"013",  label:"bird"}
            ]},
            {id:"020",  label:"TRAFFIC",    children:[
                {id:"021",  label:"car"},
                {id:"022",  label:"bus"},
                {id:"023",  label:"plane"}
            ]},
            {id:"030",  label:"MOBILE",     children:[
                {id:"031",  label:"ipone"},
                {id:"032",  label:"smartisan"}
            ]}
        ];

        //菜单React组件
        var ReactMenus = React.createClass({
            getInitialState : function(){
                return {expandId : -1};
            },
            clickHandler : function(menuDataId){
                this.setState({ expandId: menuDataId});
            },
            render :function(){
                //保持当前组件对象，方便在循环内部使用
                var crtCmp = this;

                //遍历获取菜单数据，生成Virtual DOM对象
                var menusDataDom = this.props.menuDatas.map(function(crtMenuData){

                    //遍历子菜单数据，生成Virtual DOM对象-->当前组件被点击，才展示子菜单数据
                    var liData = null;
                    if(crtMenuData.children){

                        liData = crtMenuData.children.map(function(currentLiData){
                            return (
                                    <li key={currentLiData.id} className={crtMenuData.id==crtCmp.state.expandId?"":"hidden"}>
                                        {currentLiData.label}
                                    </li>
                                    )
                        });

                        liData = <ul>{liData}</ul>
                    }


                    //将完整Virtual DOM返回
                    return (
                            <div key={crtMenuData.id}>
                                <div onClick={crtCmp.clickHandler.bind(crtCmp,crtMenuData.id)}>{crtMenuData.label}</div> 
                                {liData?liData:""} 
                            </div>
                            );

                })

                return (
                    <div>{menusDataDom}</div>
                )
            }
        });

        //渲染到DOM
        ReactDOM.render(<ReactMenus menuDatas={menuDatas} /> , document.getElementById("myComponent"));
    </script>
  </body>
</html>

兜茄破

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用ReactJs写一个简单的手风琴菜单效果

ReactJs除了利用Virtual DOM大大提高了页面渲染速度。本身基于组件的编码方式也很优雅，组件层次结构比较清晰，挺易于维护的。下面用ReactJs写一个简单的手风琴菜单效果，仅供学习交流。完整源码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <script sr
复制链接

扫一扫