最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
The following example shows how to use the In the instance You can use the component class’s The following example demonstrates how to combine use in an application Props authentication uses the The following example creates a More validators are described as follows: state and props the main difference is that props is immutable, and state it can be changed according to the interaction with the user. This is why some container components need to be defined state to update and modify the data. And subcomponents can only pass through the props to transmit data. 3.7.1. Use Props ¶
props :React instance ¶
functionHelloMessage(props){returnHello{props.name}!
;}constelement= name property through the props.name to get. 3.7.2. Default Props ¶
defaultProps the property is props set the default value. Examples are as follows: React instance ¶
classHelloMessageextendsReact.Component{render(){return(<h1>Hello,{this.props.name}h1>);}}HelloMessage.defaultProps={name:'Runoob'};constelement= <HelloMessage/>;ReactDOM.render(element,document.getElementById('example'));
3.7.3. State and Props ¶
state and props . We can set it in the parent component state and by using the props Pass it to the child component. In render function, we set the name and site to get the data passed by the parent component. React instance ¶
classWebSiteextendsReact.Component{constructor(){super();this.state={name:"Rookie Tutorial",site:"https://www.runoob.com"}}render(){return(<div> <Namename={this.state.name}/> <Linksite={this.state.site}/> div>);}}classNameextendsReact.Component{render(){return(<h1>{this.props.name}h1>);}}classLinkextendsReact.Component{render(){return(<ahref={this.props.site}>{this.props.site}a>);}}ReactDOM.render(<WebSite/>,document.getElementById('example'));
3.7.4. Props verification ¶
React.PropTypes since React v15.5, it has been moved to prop-types library. <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js">script>
propTypes which ensures that our application components are used correctly React.PropTypes many validators (validator) are provided to verify that the incoming data is valid. When the direction props the JavaScript console throws a warning when invalid data is passed in. Mytitle components, properti `` title``is required and is a string, and non-string types are automatically converted to strings: React 16.4 instance ¶
vartitle="Rookie Tutorial";//var title = 123;classMyTitleextendsReact.Component{render(){return(<h1>Hello,{this.props.title}h1>);}}MyTitle.propTypes={title:PropTypes.string};ReactDOM.render(<MyTitletitle={title}/>,document.getElementById('example'));
React 15.4 instance ¶
vartitle="Rookie Tutorial";//var title = 123;varMyTitle=React.createClass({propTypes:{title:React.PropTypes.string.isRequired,},render:function(){return<h1>{this.props.title}h1>;}});ReactDOM.render(<MyTitletitle={title}/>,document.getElementById('example'));
MyComponent.propTypes={//can declare prop as specified JS Basic data types, by default, these data are optional optionalArray:React.PropTypes.array,optionalBool:React.PropTypes.bool,optionalFunc:React.PropTypes.func,optionalNumber:React.PropTypes.number,optionalObject:React.PropTypes.object,optionalString:React.PropTypes.string,//Objects that can be rendered numbers, strings, elements or arrayoptionalNode:React.PropTypes.node,//React element optionalElement:React.PropTypes.element,//Using JS instanceof operator declaration prop For instance of class。optionalMessage:React.PropTypes.instanceOf(Message),//use enum to restrict prop Only accept specified values. optionalEnum:React.PropTypes.oneOf(['News','Photos']),//Can be one of multiple object types optionalUnion:React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number,React.PropTypes.instanceOf(Message)]),//An array composed of specified types optionalArrayOf:React.PropTypes.arrayOf(React.PropTypes.number),//An object composed of properties of a specified type optionalObjectOf:React.PropTypes.objectOf(React.PropTypes.number),//specific shape Object of parameter optionalObjectWithShape:React.PropTypes.shape({color:React.PropTypes.string,fontSize:React.PropTypes.number}),//Any type plus \`isRequired\` to send prop Cannot be empty. requiredFunc:React.PropTypes.func.isRequired,//Any type that cannot be empty requiredAny:React.PropTypes.any.isRequired,//Custom validator. If verification fails, a return is required Error object. Do not use directly \`console.warn\` or throw an exception, because of this \`oneOfType\` will fail. custom Prop:function(props,propName,componentName){if(!/matchme/.test(props[propName])){returnnewError('Validation failed!');}}}}