ReactJS props验证

属性验证是强制组件正确使用的有效方法。 这将有助于开发过程中避免未来的错误和问题，一旦应用程序变得更大。 这也使得代码更具可读性，因为我们可以看到每个组件应该如何使用。

验证props

在这个例子中，我们使用需要的所有props来创建App组件。 App.propTypes用于props验证。如果某些props没有使用指定的正确类型，那么将会得到一个控制台警告。在指定验证模式后，我们将设置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: 'xuhuhu.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都是有效的，会得到如下的结果。

React Props验证示例
可以注意到，在验证propArray和propBool时，我们使用了isRequired。如果其中一个不存在，它会给出一个错误。 如果从App.defaultProps对象中删除propArray：[1,2,3,4,5]，控制台将会记录一个警告。