ReactJS - Sahne Doğrulaması

Özelliklerin doğrulanması, bileşenlerin doğru kullanımını zorlamanın yararlı bir yoludur. Bu, geliştirme sırasında uygulama büyüdükten sonra gelecekteki hataları ve sorunları önlemeye yardımcı olacaktır. Ayrıca, her bileşenin nasıl kullanılması gerektiğini görebildiğimiz için kodu daha okunaklı hale getirir.

Props Doğrulanıyor

Bu örnekte, yaratıyoruz App tüm bileşenlerle props ihtiyacımız olan App.propTypessahne doğrulaması için kullanılır. Donanımlardan bazıları atadığımız doğru türü kullanmıyorsa, bir konsol uyarısı alacağız. Doğrulama modellerini belirledikten sonra,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'));