react 判斷實例類型

今天在寫組件的時候想經過判斷內部子元素不一樣而在父元素上應用不一樣的class，因而首先要解決的就是如何判斷子元素的類型。

這裏附上一個講的很全面的文章：

http://www.javashuo.com/article/p-vdehluvk-bc.html

typeof運算符

首先說一下typeof，它是一個操做符，其右側跟一個一元表達式，並返回這個表達式的數據類型。返回的結果用該類型的字符串(全小寫字母)形式表示，包括如下 7 種：number、boolean、symbol、string、object、undefined、function 等。基本數據類型是能夠判斷的，可是對象就只能到object，沒法區分具體的function name或者說是class name。

if(typeof 'hello' == 'string'){
  console.log("true")
}

instanceof運算符

原文地址：https://www.cnblogs.com/SourceKing/p/5766210.html

instanceof運算符用來判斷一個構造函數的prototype屬性所指向的對象是否存在另一個要檢測對象的原型鏈上

instanceof的普通的用法，obj instanceof Object 檢測Object.prototype是否存在於參數obj的原型鏈上。

Person的原型在p的原型鏈中

function Person(){};
var p =new Person();
console.log(p instanceof Person);//true

總結：用一個方法模擬instanceof的判斷邏輯

function _instanceof(A, B) {
    var O = B.prototype;// 取B的顯示原型
    A = A.__proto__;// 取A的隱式原型
    while (true) {
        //Object.prototype.__proto__ === null
        if (A === null)
            return false;
        if (O === A)// 這裏重點：當 O 嚴格等於 A 時，返回 true
            return true;
        A = A.__proto__;
    }
}

通過debug，發現react的一個組件並不能經過這種方式判斷。具體放到繼承那邊去講吧。

React.Children.map+elementType 

經過學習其餘組件的代碼，看到有這樣寫的

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

            const { elementType } = element.type;
            if (elementType !== 'YourClass' ) {
              return null;
            }
            ...
          })

須要在本身的類裏面添加一個常量(捂臉)

static elementType = 'YourClass';

 

this.props.children.type.name

最後我用的是這種方式

this.props.children&&!Array.isArray(this.props.children)&&this.props.children.type.name == 'YourClass'

若是須要在props屬性列表中限制類型，能夠看這個文檔：

http://www.css88.com/react/docs/typechecking-with-proptypes.html

------------------------------

2018.6.26 補充

今天build了一下,上面那個方法type.name拿不到正確的值了.....尷尬......用回第三種方法。

因而決定仍是好好研究一下原理吧。。。(捂臉)

原理嘛， 一個是es6 裏static 關鍵字，還有一個重點，敲黑板，Flowtype ,官網文檔在這裏

https://flow.org/en/docs/react/