組件化思路：以selection為例子，使用prop-types實現組件化控制，重用

cgspine 發布于2019-08-01 18:01 / 2458人閱讀

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

需求

書接上文，UI 積累之select section

這里又來兩個需求了。

當我點擊選擇了option后，我應該看到的是我選擇的option的內容

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

第一只老虎--顯示option內容

我們的dom是這樣的：


    
    Please select one option...

具體實現，通過react的state倒是能很簡單實現。

給select綁定個onChange事件，觸發onSelect方法，當選擇select的option的時候，把選到的值傳給真正顯示的span

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

1）怎么拿：

點擊的時候，通過event.target.value拿到選中的option的值

2）怎么給：

在組件渲染的時候，constructor里的state定義一個值存放選中的值，叫showValue，當選擇時，在onSelect方法里，拿到event.target.value后，set給這個值，同時dom中的span進行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}
                
            
        );
    }
}

實例圖：

第二只老虎--組件化

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

render(
    
)

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

WTF，怎么做呢？

需求啊，莫得辦法

為了開發方便，我自己設計，要是能組件化，幾個屬性在引入的時候可以選擇性定義就好了，比如：

能這么實現就完美了。

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

定義屬于這個組件的類型：

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。。。應該差不多了，這里代碼里就忽略了

自定義屬性時候純數字和字符串的判斷

當height是比30小的時候的判斷處理

有興趣自己加

ok，完美收工

GPU云服務器云服務器 vuejs組件使用在php中使用組件 asp使用第三方組件組件化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51526.html

組件化思路：以selection為例子，使用prop-types實現組件化控制，重用

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

you_De 2019-08-21 17:38 評論0 收藏0
組件化思路：以selection為例子，使用prop-types實現組件化控制，重用

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

edagarli 2019-08-29 13:49 評論0 收藏0
React中的Context怎么用

摘要：怎樣使用假設有個如下的結構上面的例子中，我們把手動的方式傳給了，這期間穿越了，而對本身沒有什么用。不建議使用絕大多數的應用程序是不需要使用的。如果項目對數據管理較為復雜，推薦使用類似于或這樣的狀態管理庫，而不要使用。 What is Context 今天在學習styled-components的Theming時，關于styled-components對主題的實現與管理上提到，主要應用到...

zhouzhou 2019-08-21 16:48 評論0 收藏0
React中組件通信的幾種方式

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

yeooo 2019-08-21 18:00 評論0 收藏0
寫 React 組件的最佳實踐

摘要：本文介紹了，我們團隊寫組件的最佳實踐。這樣可以避免類似之類的錯誤避免使用函數表達式的方式來定義組件，如下這看起來非?？?，但是在這里，通過函數表達式定義的函數卻是匿名函數。匿名函數也可能會導致測試庫出問題。本文為譯文，已獲得原作者允許，原文地址：http://scottdomes.com/blog/ou... 當我第一次開始寫 React 時，我發現多少個 React 教程，就有多少種...

lakeside 2019-08-20 18:55 評論0 收藏0