成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

組件化思路：以selection為例子，使用prop-types實(shí)現(xiàn)組件化控制，重用

you_De / 701人閱讀

摘要：如何只開發(fā)一個(gè)組件就滿足這個(gè)無理要求呢第一只老虎顯示內(nèi)容我們的是這樣的具體實(shí)現(xiàn)，通過的倒是能很簡單實(shí)現(xiàn)。怎么做呢，這就要引入一個(gè)包，叫了，定義屬于這個(gè)組件的變量，然后將其運(yùn)用到組件的每個(gè)的上。接下來以上述為例子。

需求 
書接上文，UI 積累之select section

這里又來兩個(gè)需求了。

當(dāng)我點(diǎn)擊選擇了option后，我應(yīng)該看到的是我選擇的option的內(nèi)容

多例重用，即同樣是個(gè)selection，我只是需要改點(diǎn)東西，其他不變，比如selection里面的字內(nèi)容，font-size, font-family, selection的width, height等。。。如何只開發(fā)一個(gè)組件就滿足這個(gè)“無理要求”呢？

第一只老虎--顯示option內(nèi)容

我們的dom是這樣的：


    
    Please select one option...

具體實(shí)現(xiàn)，通過react的state倒是能很簡單實(shí)現(xiàn)。

給select綁定個(gè)onChange事件，觸發(fā)onSelect方法，當(dāng)選擇select的option的時(shí)候，把選到的值傳給真正顯示的span

問題來了：1）怎么拿。 2）怎么給

1）怎么拿：

點(diǎn)擊的時(shí)候，通過event.target.value拿到選中的option的值

2）怎么給：

在組件渲染的時(shí)候，constructor里的state定義一個(gè)值存放選中的值，叫showValue，當(dāng)選擇時(shí)，在onSelect方法里，拿到event.target.value后，set給這個(gè)值，同時(shí)dom中的span進(jìn)行this.state.showValue值綁定。
Talk is cheap, show me the code

完整代碼如下：

class Selection extends Component {
    constructor(props){
        super(props)
        this.state = {
            showValue: "Please select one option..."
        }
    }

    onSelect(e){
        this.setState({showValue: e.target.value});
    }
    render() {
        return (
            
                
                {this.state.showValue}
                

            
        );
    }
}

實(shí)例圖：


第二只老虎--組件化

看上面的代碼可以知道，引入這個(gè)selection的方式是這樣的

render(
    
)

但是你這個(gè)selection啊，我同一個(gè)頁面要引入N個(gè)，其中一個(gè)高度要是40px，另一個(gè)寬度要長點(diǎn)，500px，還有一個(gè)長寬都不用變，你給我變下這個(gè)selection的default的字啊，不叫Please select one option...， 叫什么Please kindly select one option...，還有一個(gè)，你給我保持原樣不變哈，謝謝了。

WTF， 怎么做呢？

需求啊，莫得辦法

為了開發(fā)方便，我自己設(shè)計(jì)，要是能組件化，幾個(gè)屬性在引入的時(shí)候可以選擇性定義就好了，比如：

render(
    

        
        
        
        
    

)

能這么實(shí)現(xiàn)就完美了。

怎么做呢，這就要引入一個(gè)包，叫prop-types了，定義屬于這個(gè)組件的變量，然后將其運(yùn)用到組件的每個(gè)dom的css上。
接下來以上述為例子。

定義屬于這個(gè)組件的類型：

Selection.propTypes = {
    height: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string,
    ]),
    width: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string,
    ]),
    words: PropTypes.string
}

Selection.defaultProps = {
    height: "30px",
    width: "300px",
    words: "Please select one option..."
}

然后就是通過react的this.props引入啦

Talk is cheap, show me the code

index.js

class App extends Component {
  render() {
    return (
        

          
          
          
          
        

    );
  }
}

Selection.js

class Selection extends Component {
    constructor(props){
        super(props)
        this.state = {
            showValue: this.props.words
        }
    }

    onSelect(e){
        this.setState({showValue: e.target.value});
        console.log(e.target.value)
    }
    render() {
        const { width, height } = this.props

        const style = {
            width: width,
            height: height            
        }

        const suitableHeight = (parseInt(height.substring(0, height.length-2)) - 30) / 2 + 6;
        
        const spanStyle = {
            width: width,
            height: height,
            paddingTop:suitableHeight
        }

        const arrowStyle = {
            top:suitableHeight
        }

        return (
            
                
                {this.state.showValue}
                

            
        );
    }
}

Selection.propTypes = {
    height: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string,
    ]),
    width: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string,
    ]),
    words: PropTypes.string
}

Selection.defaultProps = {
    height: "30px",
    width: "300px",
    words: "Please select one option..."
}

效果圖：

hm。。。應(yīng)該差不多了，這里代碼里就忽略了

自定義屬性時(shí)候純數(shù)字和字符串的判斷

當(dāng)height是比30小的時(shí)候的判斷處理

有興趣自己加

ok，完美收工

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89805.html

相關(guān)文章

  • 組件化思路：以selection為例子，使用prop-types實(shí)現(xiàn)組件化控制，重用

    摘要：如何只開發(fā)一個(gè)組件就滿足這個(gè)無理要求呢第一只老虎顯示內(nèi)容我們的是這樣的具體實(shí)現(xiàn)，通過的倒是能很簡單實(shí)現(xiàn)。怎么做呢，這就要引入一個(gè)包，叫了，定義屬于這個(gè)組件的變量，然后將其運(yùn)用到組件的每個(gè)的上。接下來以上述為例子。 需求 書接上文，UI 積累之select section 這里又來兩個(gè)需求了。 當(dāng)我點(diǎn)擊選擇了option后，我應(yīng)該看到的是我選擇的option的內(nèi)容 多例重用，即同樣是個(gè)...

    cgspine 評(píng)論0 收藏0

  • 組件化思路：以selection為例子，使用prop-types實(shí)現(xiàn)組件化控制，重用

    摘要：如何只開發(fā)一個(gè)組件就滿足這個(gè)無理要求呢第一只老虎顯示內(nèi)容我們的是這樣的具體實(shí)現(xiàn)，通過的倒是能很簡單實(shí)現(xiàn)。怎么做呢，這就要引入一個(gè)包，叫了，定義屬于這個(gè)組件的變量，然后將其運(yùn)用到組件的每個(gè)的上。接下來以上述為例子。 需求 書接上文，UI 積累之select section 這里又來兩個(gè)需求了。 當(dāng)我點(diǎn)擊選擇了option后，我應(yīng)該看到的是我選擇的option的內(nèi)容 多例重用，即同樣是個(gè)...

    edagarli 評(píng)論0 收藏0

  • React中的Context怎么用

    摘要：怎樣使用假設(shè)有個(gè)如下的結(jié)構(gòu)上面的例子中，我們把手動(dòng)的方式傳給了，這期間穿越了，而對(duì)本身沒有什么用。不建議使用絕大多數(shù)的應(yīng)用程序是不需要使用的。如果項(xiàng)目對(duì)數(shù)據(jù)管理較為復(fù)雜，推薦使用類似于或這樣的狀態(tài)管理庫，而不要使用。 What is Context 今天在學(xué)習(xí)styled-components的Theming時(shí)，關(guān)于styled-components對(duì)主題的實(shí)現(xiàn)與管理上提到，主要應(yīng)用到...

    zhouzhou 評(píng)論0 收藏0

  • React中組件通信的幾種方式

    摘要：首次發(fā)表在個(gè)人博客需要組件之進(jìn)行通信的幾種情況父組件向子組件通信子組件向父組件通信跨級(jí)組件通信沒有嵌套關(guān)系組件之間的通信父組件向子組件通信數(shù)據(jù)流動(dòng)是單向的父組件向子組件通信也是最常見的父組件通過向子組件傳遞需要的信息子組件向父組件通信利用 showImg(https://segmentfault.com/img/remote/1460000012361466?w=1240&h=667)...

    yeooo 評(píng)論0 收藏0

  • 寫 React 組件的最佳實(shí)踐

    摘要：本文介紹了，我們團(tuán)隊(duì)寫組件的最佳實(shí)踐。這樣可以避免類似之類的錯(cuò)誤避免使用函數(shù)表達(dá)式的方式來定義組件，如下這看起來非常酷，但是在這里，通過函數(shù)表達(dá)式定義的函數(shù)卻是匿名函數(shù)。匿名函數(shù)也可能會(huì)導(dǎo)致測(cè)試庫出問題。 本文為譯文，已獲得原作者允許，原文地址：http://scottdomes.com/blog/ou... 當(dāng)我第一次開始寫 React 時(shí)，我發(fā)現(xiàn)多少個(gè) React 教程，就有多少種...

    lakeside 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<