ReactJS道具验证

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

验证道具

在这个例子中，我们使用我们需要的所有道具创建 App 组件。 App.propTypes 用于道具验证。如果某些道具没有使用我们指定的正确类型，我们将收到控制台警告。在我们指定验证模式后，我们将设置 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: 'CodingDict.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;

由于所有道具都是有效的，我们会得到以下结果。

React Props验证示例

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

React Props验证错误

如果我们设置 propArray：1 的值，React会警告我们propType验证失败了，因为我们需要一个数组并且我们得到了一个数字。

React Props验证错误2