屬性驗(yàn)證是強(qiáng)制組件正確使用的有效方法。 這將有助于開(kāi)發(fā)過(guò)程中避免未來(lái)的錯(cuò)誤和問(wèn)題，一旦應(yīng)用程序變得更大。 這也使得代碼更具可讀性，因?yàn)槲覀兛梢钥吹矫總€(gè)組件應(yīng)該如何使用。

驗(yàn)證props

在這個(gè)例子中，我們使用需要的所有props來(lái)創(chuàng)建App組件。 App.propTypes用于props驗(yàn)證。如果某些props沒(méi)有使用指定的正確類(lèi)型，那么將會(huì)得到一個(gè)控制臺(tái)警告。在指定驗(yàn)證模式后，我們將設(shè)置App.defaultProps。

文件：App.jsx -

import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   render() {
      return ( 
         <div>
            <h1> Hello, {this.props.name} </h1>
            <h3>Array: {this.props.propArray}</h3>            
            <h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
            <h3>Func: {this.props.propFunc(3)}</h3>
            <h3>Number: {this.props.propNumber}</h3>
            <h3>String: {this.props.propString}</h3>
         </div>
      );
   }
}
App.propTypes = {
   name: PropTypes.string,
   propArray: PropTypes.array.isRequired,
   propBool: PropTypes.bool.isRequired,
   propFunc: PropTypes.func,
   propNumber: PropTypes.number,
   propString: PropTypes.string,
};
App.defaultProps = {
   name: 'Yiibai.com',
   propArray: [1, 2, 3, 4, 5],
   propBool: true,
   propFunc: function(e) {
      return e
   },
   propNumber: 1,
   propString: "String value..."
}
export default App;

文件：main.js -

import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

文件： webpack.config.js -

var config = {
   entry: './main.js',

   output: {
      path:'/',
      filename: 'index.js',
   },
   devServer: {
      inline: true,
      port: 8080
   },
   externals: {
      'react': 'React'
   },
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}
module.exports = config;

由于所有的props都是有效的，會(huì)得到如下的結(jié)果。

React Props驗(yàn)證示例
可以注意到，在驗(yàn)證propArray和propBool時(shí)，我們使用了isRequired。如果其中一個(gè)不存在，它會(huì)給出一個(gè)錯(cuò)誤。 如果從App.defaultProps對(duì)象中刪除propArray：[1,2,3,4,5]，控制臺(tái)將會(huì)記錄一個(gè)警告。