国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用React實現(xiàn)點擊切換的標簽頁

xushaojieaaa / 1827人閱讀

摘要：四總結(jié)上面一系列的操作最終的結(jié)果都需要用來反應出來，所以關(guān)鍵點是如何在中使用來動態(tài)生成接下來的改進實現(xiàn)可以滑動的標簽頁

一、首先是Showcase

See the Pen react-tabs by Wang Chao (@charleyw) on CodePen.

二、如何實現(xiàn)

既然用React寫，那么它就必然是一個組件，首先考慮你怎么使用這個組件，也就是這個組件的接口是怎么樣的。

這個TabsControl作為父組件，它來控制Tab的如何切換，Tab是用來包裹真正要顯示的內(nèi)容的，它的name屬性是這個標簽頁的名字，會被顯示在標簽頁的標題欄上。

三、創(chuàng)建基本元素

按照之前的想法，我們用Tab定義了很多個標簽頁，我們需要根據(jù)這些定義生成標簽頁的標題欄和內(nèi)容。

1. 遍歷this.props.children動態(tài)生成標題欄

this.props.children是React內(nèi)建的一個屬性，用來獲取組件的子元素。因為子元素有可能是Object或者Array，所以React提供了一些處理children的輔助方法用來遍歷：React.Children.map

那么動態(tài)生成標題的代碼可能是這樣子的：

React.Children.map(this.props.children, (element, index) => {
    return (
{element.props.name}
)
2. 再用同樣方法生成標簽頁內(nèi)容 
React.Children.map(this.props.children, element => {
    return (element)
})

組合起來就是TabsControl的實現(xiàn)：

let TabsControl = React.createClass({
  render: function () {
    let that = this;
    let {baseWidth} = this.props;
    let childrenLength = this.props.children.length;
    return (
      

        
        

          {React.Children.map(this.props.children, element => {
            return (element)
          })}
        

      

    )
  }
});

加上一些css就能看到一個標簽頁的雛形了。

三、實現(xiàn)標簽頁切換

這里要出現(xiàn)React最重要的概念了state，state是一個Javascript的Object，它是用來表示組件的當前狀態(tài)的，如果用TabsControl舉例的話，它的state可以是當前處于激活狀態(tài)的標簽頁編號（當然，如果你想的話也可以保存標簽頁的內(nèi)容）。
React提供了一個方法setState()讓你可以改變state的值。每次調(diào)用setState()都會觸發(fā)組件的render()，也就是說會把組件所代表的DOM更新到state所代表的狀態(tài)。

所以實現(xiàn)切換的關(guān)鍵如下：

state保存當前處于激活狀態(tài)的標簽頁的編號

點擊標題的時候調(diào)用setState()更新激活的標簽頁編號

render()的時候，在遍歷this.props.children的時候把編號與state中編號一致的元素標記為active

用css將非active的元素隱藏起來

所以代碼是這樣的：

let TabsControl = React.createClass({
  getInitialState: function(){
    return {currentIndex: 0}
  },
  
  getTitleItemCssClasses: function(index){
    return index === this.state.currentIndex ? "tab-title-item active" : "tab-title-item";
  },
  
  getContentItemCssClasses: function(index){
    return index === this.state.currentIndex ? "tab-content-item active" : "tab-content-item";
  },
  
  render: function(){
    let that = this;
    let {baseWidth} = this.props;
    let childrenLength = this.props.children.length;
    return (
      

        
        

          {React.Children.map(this.props.children, (element, index) => {
            return (
{element}
)
          })}  
        

      

    )
  }
});

getInitialState：是組件的初始化狀態(tài)，默認是第一個標簽頁處于激活狀態(tài)。
getTitleItemCssClasses：判斷當前標簽和state中保存的標簽編號是否一直，是則標識為active。
getContentItemCssClasses：同上。
onClick={() => {this.setState({currentIndex: index})}}：標簽頁標題綁定了點擊事件，每次點擊都會更新state保存的標簽頁編號，然后觸發(fā)render()方法重繪標簽頁。

四、總結(jié)

上面一系列的操作最終的結(jié)果都需要用render()來反應出來，所以關(guān)鍵點是如何在render()中使用state來動態(tài)生成DOM.

接下來的改進

實現(xiàn)可以滑動的標簽頁

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91584.html

相關(guān)文章

  • 用React實現(xiàn)點擊切換的標簽頁

    摘要：四總結(jié)上面一系列的操作最終的結(jié)果都需要用來反應出來，所以關(guān)鍵點是如何在中使用來動態(tài)生成接下來的改進實現(xiàn)可以滑動的標簽頁 一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何實現(xiàn) 既然用React寫，那么它就必然是一個組件，首先考慮你怎么使用這個組件，也就是這個組件的接口是怎么樣的。 ...

    codeKK 評論0 收藏0

  • 手把手教你用React實現(xiàn)一個簡單的個人博客

    摘要：官方文檔中文文檔基本使用注意一定要在根目錄的中聲明，要不然點擊任何鏈接都無法跳轉(zhuǎn)。官方文檔中文文檔簡單的來說，每一次的修改狀態(tài)都需要觸發(fā)，然而其實項目中我現(xiàn)在還沒用到修改數(shù)據(jù)。。。 學習 React 的過程中實現(xiàn)了一個個人主頁，沒有復雜的實現(xiàn)和操作，適合入門 ~ 原文地址：https://github.com/axuebin/react-blog/issues/17 這個項目其實功能...

    zhaochunqi 評論0 收藏0

  • 國內(nèi)存在感最低的前端API——瀏覽器路由

    摘要：最新一直在看關(guān)于和路由這塊的知識，最終發(fā)現(xiàn)這些路由框架的模塊功能的實現(xiàn)都是基于瀏覽器原生路由的。在瀏覽器中實現(xiàn)前端路由主要有兩種方式一個是我們常用的，另一個是提供的。該對象的和分別表示的各個部分，它們因此被稱為分解屬性。 最新一直在看關(guān)于 Vue 和 React 路由這塊的知識，最終發(fā)現(xiàn)這些路由框架的模塊功能的實現(xiàn)都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽...

    U2FsdGVkX1x 評論0 收藏0

  • 國內(nèi)存在感最低的前端API——瀏覽器路由

    摘要：最新一直在看關(guān)于和路由這塊的知識，最終發(fā)現(xiàn)這些路由框架的模塊功能的實現(xiàn)都是基于瀏覽器原生路由的。在瀏覽器中實現(xiàn)前端路由主要有兩種方式一個是我們常用的，另一個是提供的。該對象的和分別表示的各個部分，它們因此被稱為分解屬性。 最新一直在看關(guān)于 Vue 和 React 路由這塊的知識，最終發(fā)現(xiàn)這些路由框架的模塊功能的實現(xiàn)都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽...

    tolerious 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<