ReactJS嚐鮮：實現tab頁切換和菜單欄切換和手風琴切換效果，進度條效果

時間  2019-11-16
標籤 reactjs 嚐鮮 實現 tab 切換 菜單 手風琴 效果 進度 简体版
原文   原文鏈接

　　前沿

　　對於React， 去年就有耳聞， 挺不想學的， 前端那麼多東西， 學了一個框架又有新框架要學👿， 反正心裏是拒絕的， 這幾天有空研究一下ReactJS，而後本身寫了幾個小案例， 發現和本身之前寫的單向DOM數據流輸出的效果差很少， 一個JS單向數據流動庫----one way binding html

　　使用React寫了幾個Demo之後， 發現React仍是很好用的， 由於React的思惟， 會強迫咱們把JS的頁面結構分解成各個模塊和組件， 有利於模塊的重用， 其實和angularJS中的指令是一個意思，可是React更專一於HTML的View；前端

　　可是惟一的遺憾是，若是頁面的html結構改變比較大的話， 要從新修改各個組件的html， 這樣是比較麻煩的；react

　　使用React實現了一個tab頁籤切換效果：

　　把組件分解爲三塊， 第一塊爲Tab，Tab這個組件包含了兩個組件：Nav導航條組件和content內容組件， Tab組件包含了用戶的點擊事件， 以及子模塊的狀態， 子模塊只要負責內容的渲染，不用關心邏輯， 我的感受這種思路很是清晰微信

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React</title>

    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
    <style>
    .active{
        color:#00ff00;
    }
    </style>
  </head>
  <body>
    <div id="example">
        
    </div>
    <div id="example1"> 
    </div>
    <script type="text/babel">
    var NavClass = React.createClass({
        render : function() {
            return (<div>
                {this.props.navs.map((el,index)=>{
                    return (<button onClick={this.props.clk.bind(null,index)} className={this.props.index==index?"active":""} key={index}>{el}</button>)
                })}
                </div>);
        }
    })
    var ContentsClass = React.createClass({
        render : function() {
            return (<div>
                {this.props.contents.map((el, index)=>{
                    return (<span  key={index} className={this.props.index==index?"active":""}>
                        {el}
                        </span>)
                })}
                </div>)
        }
    });
    var Tab = React.createClass({
        getInitialState : function() {
            return {
                index : 0
            };
        },
        handleClick : function(index) {
            console.log(this)
            this.setState({
                index : index
            })
        },
        render : function() {
            return (<div className="tabs">
                    <NavClass ref="nav" clk={this.handleClick} index={this.state.index} navs={this.props.navs} />
                    <ContentsClass ref="con" index={this.state.index} contents={this.props.contents} />
                </div>)
        }
    });
    var obj = {
        navs : ["a","b","c"],
        contents : ["內容a","內容bbbbb","內容ccccc"]
    }
    //console.time();
    ReactDOM.render(
      <Tab navs={obj.navs}  contents={obj.contents}/>,
      document.getElementById('example')
    );
    ReactDOM.render(
      <Tab navs={obj.navs}  contents={obj.contents}/>,
      document.getElementById('example1')
    );
    // document.getElementById("example").innerHTML = '<div data-reactroot="" class="tabs"><div><button class="active">a</button><button class="">b</button><button class="">c</button></div><div><span class="active">aaaaa</span><span class="">bbbbb</span><span class="">ccccc</span></div></div>'
    //console.timeEnd()
    </script>
  </body>
</html> 

　　使用React實現了一個鼠標移入的菜單欄效果：

　　把每個菜單都單獨做爲一個組件， 能夠很方便地實現組件的複用， 組件的open狀態表示了該元素的菜單是否要顯示， 每個組件都有各自的狀態，每個組件不會相互影響；babel

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
    <style>
    *{
        margin:0;
        padding:0;
    }
    ul{
        list-style:none;
    }
    .menus{
        
    }
    .menus .menu{
        float:left;
        margin-left:4px;
    }
    .menus .menu button{
        padding:4px;
    }
    .menus ul.sub-menu{
        background:#c1d2e3;
    }
    .menus ul li{
        padding-left:4px;
    }
    </style>
  </head>
  <body>
    <div id="example">
<!--         <div class="menus">
            <div class="menu">
                <button>
                    {buttonName}
                </button>
                <ul class="sub-menu">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>

            <div class="menu">
                <button>
                    {buttonName}
                </button>
                <ul class="sub-menu">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
        </div> -->
    </div>
    <script type="text/babel">
    var Menu = React.createClass({
        mover : function() {
            this.setState({
                open : true
            });
        },
        mout : function() {
            this.setState({
                open : false
            });
        },
        getInitialState : function() {
            return {
                open : false
            }
        },
        render : function() {
            return (
                <div className="menu">
                    <button onMouseOver={this.mover}  onMouseOut={this.mout}>
                        {this.props.menuData.name}
                    </button>
                    <ul className="sub-menu" style={{display:this.state.open ? "block" : "none"}}>
                        {this.props.menuData.arr.map((el, index) => {
                            return (<div key={index}>{el}</div>)
                        })}
                    </ul>
                </div>)
        }
    });
    var Menus = React.createClass({
        render : function() {
            return (<div className="menus">
                {this.props.data.map((el ,index)=>{
                    return (<Menu key={index} menuData={el}/>)
                })}
            </div>);
        }
    });
    var data = [
        {
            name : "menuName",
            arr : [
                "menu1",
                "menu2",
                "menu3",
                "menu4"
            ]
        },
        {
            name : "menuName1111",
            arr : [
                "menu-1",
                "menu-2",
                "menu-3",
                "menu-4"
            ]
        }
    ];
    ReactDOM.render(<Menus data={data} />, document.getElementById("example"));
    </script>
  </body>
</html> 

 

　　手風琴切換效果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React</title>

<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>框架

    <style>
        *{
            margin:0;
            padding:0;
        }
        .accordion{
            background:#f00;
            height:400px;
        }
        .accordion .div{
            float:left;
            width:100%;
        }
        .accordion .title{
            background:#0f0;
            height: 20px;
            line-height:20px;
            cursor:pointer;
        }
        .accordion .content{
            transition:height 1s;
            height:0;
            background:#00f;
            overflow:auto;
        }
        .accordion .content.full{
            height:320px;
        }
        .accordion:after{
            clear:both;
            content:"";
            display:block;
        }
    </style>
  </head>
  <body>
    <div id="example">
        <!-- <div class="accordion">
            <div class="div">
                <div class="title">title</div>
                <div class="content">content</div>
            </div>
            <div class="div">
                <div class="title">title</div>
                <div class="content">content</div>
            </div>
            <div class="div">
                <div class="title">title</div>
                <div class="content full">content</div>
            </div>
            <div class="div">
                <div class="title">title</div>
                <div class="content">content</div>
            </div>
        </div> -->
    </div>
    <script type="text/babel">
    var AccordionDivComponent = React.createClass({
        render : function() {
            return (
                <div className="div">
                    <div className="title" onClick={this.props.clk}>title</div>
                    <div className={"content "+(this.props.active ? "full" : "")} >content</div>
                </div>
            );
        }
    });
    var Accordion = React.createClass({
        getInitialState : function() {
            return {
                index : 0
            }
        },
        handlClick : function(index , ev) {
            this.setState({
                index : index
            })
        },
        render : function() {
            return (<div className="accordion">
                {this.props.data.map((el, index)=> {
                    return (<AccordionDivComponent  active={this.state.index == index} clk={this.handlClick.bind(null,index)} key={index} />)
                })}
            </div>);
        }
    });
    var arr = [
        {
            title : "title",
            content : "content"
        },
        {
            title : "title1",
            content : "content1"
        },
        {
            title : "title2",
            content : "content2"
        },
        {
            title : "title2",
            content : "content2"
        }
    ];
    //console.time();
    ReactDOM.render(
      <Accordion data={arr}/>,
      document.getElementById('example')
    );
    </script>
  </body>
</html>

　　進度條效果：

　　進度條是一個組件， 啓動一個定時器， 每100毫秒從新渲染界面；dom

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
    <style>
        .process-bar{
            border:1px solid #ccc;
            height:20px;
            border-radius:4px;
        }
        .process{
            height:20px;
            line-height:20px;
            text-align:center;
            background:#a1b2c3;
        }
    </style>
  </head>
  <body>
    <div id="example">
        <!-- <div class="process-bar">
            <div class="process">
                50%
            </div>
        </div> -->
    </div>
    <script type="text/babel">
    var ProcessBar = React.createClass({
        render : function() {
            var width = parseInt(this.props.percent)+"%";
            return (
            <div className="process-bar">
                <div className="process" style={{width:width}}>
                    {this.props.percent}%
                </div>
            </div>)
        }
    });
    //直接渲染組件
    //ReactDOM.render(<ProcessBar percent="40" />, document.getElementById("example"));
    //啓動一個組件和定時器， 每一百毫秒從新渲染組件；
    var per = 0;
    setInterval(function() {
        per++;
        if(per>=101)per=0;
        ReactDOM.render(<ProcessBar percent={per} />, document.getElementById("example"));
    },100)
    </script>
  </body>
</html>

做者： NONO
出處：http://www.cnblogs.com/diligenceday/
QQ：287101329
微信：18101055830 ide

View Code

　　參考：

　　React 入門教程 ： http://www.oschina.net/translate/getting-started-with-reactthis

 

做者： NONO
出處：http://www.cnblogs.com/diligenceday/
QQ：287101329
微信：18101055830 spa

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程