ReactJS-소품 검증

속성 유효성 검사는 구성 요소의 올바른 사용을 강제하는 유용한 방법입니다. 이렇게하면 앱이 커지면 향후 버그와 문제를 방지하는 데 도움이됩니다. 또한 각 구성 요소가 어떻게 사용되어야하는지 볼 수 있기 때문에 코드를 더 읽기 쉽게 만듭니다.

소품 검증

이 예에서 우리는 App 모든 구성 요소 props 우리가 필요합니다. App.propTypes소품 유효성 검사에 사용됩니다. 일부 소품이 우리가 할당 한 올바른 유형을 사용하지 않는 경우 콘솔 경고가 표시됩니다. 유효성 검사 패턴을 지정한 후App.defaultProps.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <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>
            <h3>Object: {this.props.propObject.objectName1}</h3>
            <h3>Object: {this.props.propObject.objectName2}</h3>
            <h3>Object: {this.props.propObject.objectName3}</h3>
         </div>
      );
   }
}

App.propTypes = {
   propArray: React.PropTypes.array.isRequired,
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object
}

App.defaultProps = {
   propArray: [1,2,3,4,5],
   propBool: true,
   propFunc: function(e){return e},
   propNumber: 1,
   propString: "String value...",
   
   propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}
export default App;

main.js

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

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