使用=React.PropTypes進行類型檢測

使用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。