React從入門到精通系列之(13)使用PropTypes進行類型檢測

十3、使用PropTypes進行類型檢測

隨着你的應用的變得愈來愈大，你能夠經過typechecking來找到更多的bug。 對於某些應用，您可使用JavaScript擴展（如Flow或TypeScript）對整個應用程序進行類型檢查。

即便你不使用這些，React也有一些內置的typechecking能力。 要在組件的props上運行typechecking，能夠分配特殊的propTypes屬性：

class Greeting extends React.Component {
    render() {
        return (
            <h1>Hello {this.props.name}</h1>
        )
    };
}
Greeting.propTypes = {
    name: React.PropTypes.string.isRequired
};

React.PropTypes返回的是一系列驗證函數，用於確保接收的數據相似是不是有效的。
在這個例子中，咱們使用React.PropTypes.string.isRequire檢測name是否爲字符串，而且是必填的。
當爲prop提供無效值時，JavaScript控制檯中將顯示警告。 出於性能緣由，僅在開發模式下檢查propTypes。

React.PropTypes

下面是一個示例，其中提供了不一樣的驗證函數：

MyComponent.propTypes = {
  // 你能夠定義一個js原始類型的prop,默認請狀況下，這是都是可選的
  optionalArray: React.PropTypes.array,
  optionalBool: React.PropTypes.bool,
  optionalFunc: React.PropTypes.func,
  optionalNumber: React.PropTypes.number,
  optionalObject: React.PropTypes.object,
  optionalString: React.PropTypes.string,
  optionalSymbol: React.PropTypes.symbol,

  // 任何能夠渲染的東西：數字，字符串，元素或數組（或片斷）。
  optionalNode: React.PropTypes.node,

  // React元素
  optionalElement: React.PropTypes.element,

  // 你也能夠聲明prop是某個類的實例。 內部使用的是JS的instanceof運算符。
  optionalMessage: React.PropTypes.instanceOf(Message),

  // 你能夠經過將它做爲枚舉來確保你的prop被限制到特定的值。
  optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

  // 能夠是許多類型之一的對象
  optionalUnion: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number,
    React.PropTypes.instanceOf(Message)
  ]),

  // 某種類型的數組
  optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

  // 具備某種類型的屬性值的對象
  optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

  // 採起特定樣式的對象
  optionalObjectWithShape: React.PropTypes.shape({
    color: React.PropTypes.string,
    fontSize: React.PropTypes.number
  }),

  // 你能夠用`isRequired`來鏈接到上面的任何一個類型，以確保若是沒有提供props的話會顯示一個警告。
  requiredFunc: React.PropTypes.func.isRequired,

  // 任何數據類型
  requiredAny: React.PropTypes.any.isRequired,

  // 您還能夠指定自定義類型檢查器。 若是檢查失敗，它應該返回一個Error對象。 不要`console.warn`或throw，由於這不會在`oneOfType`內工做。
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  // 您還能夠爲`arrayOf`和`objectOf`提供自定義類型檢查器。 若是檢查失敗，它應該返回一個Error對象。 
  // 檢查器將爲數組或對象中的每一個鍵調用驗證函數。 
  // 檢查器有兩個參數，第一個參數是數組或對象自己，第二個是當前項的鍵。
  customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};

要求只能是單個子元素

使用React.PropTypes.element，您能夠指定只有一個子元素能夠做爲內容傳遞的組件。

class MyComponent extends React.Component {
    render() {
        // 只能包含一個子元素，不然會給出警告
        const children = this.props.children;
        return (
            <div>{children}</div>
        );
    }
}

MyComponent.propTypes = {
    children: React.PropTypes.element.isRequired
}

設置Prop默認值

您能夠經過使用defaultProps屬性來定義props的默認值：

class Greeting extends React.Component {
    render() {
        return <h1>hello {this.props.name}</h1>;
    };
}

// 若是name沒有傳值，則會將name設置爲默認的zhangyatao
Greeting.defaultProps = {
    name: 'zhangyatao'
}

// 會渲染處<h1>hi zhangyatao</h1>
ReactDOM.render(
    <Greeting />,
    document.getElementById('root')
)

若是父組件沒有設置並傳入name，defaultProps將確保this.props.name將有一個默認值。 propTypes類型檢查發生在defaultProps解析以後，所以類型檢查也將應用於defaultProps。