最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
In React can create different components to encapsulate the various behaviors you need. You can then render only some of them according to the state changes of the application.
React the conditional rendering in is consistent with that in JavaScript, using the JavaScript operator if or conditional operator to create an element that represents the current state, and then let React update them according to them UI .
Let’s take a look at two components:
function UserGreeting(props) { return Welcome back!
; } function GuestGreeting(props) { return Please register first.
; } We will create a You can use variables to store elements. It can help you conditionally render part of the component, while the rest of the output will not be changed. In the following example, we are going to create a file named It will render according to its current state You can embed any expression in JSX by wrapping the code in curly braces, including JavaScript’s logic and In JavaScript Therefore, if the condition is Another method of conditional rendering is to use the conditional operator of JavaScript: In the following example, we use it to conditionally render a small piece oftext. In rare cases, you may want to hide the component, even if it is rendered byother components. Let In the following example Component Greeting component, which displays one of them based on whether the user is logged in: 3.9.1. React instance ¶
functionGreeting(props){constisLoggedIn=props.isLoggedIn;if(isLoggedIn){return<UserGreeting/>;}return<GuestGreeting/>;}ReactDOM.render(//Attempt to modify isLoggedIn={true}:<GreetingisLoggedIn={false}/>,document.getElementById('example'));
Element variable ¶
LoginControl the stateful components of the 3.9.2. React instance ¶
classLoginControlextendsReact.Component{constructor(props){super(props);this.handleLoginClick=this.handleLoginClick.bind(this);this.handleLogoutClick=this.handleLogoutClick.bind(this);this.state={isLoggedIn:false};}handleLoginClick(){this.setState({isLoggedIn:true});}handleLogoutClick(){this.setState({isLoggedIn:false});}render(){constisLoggedIn=this.state.isLoggedIn;letbutton=null;if(isLoggedIn){button= <LogoutButtononClick={this.handleLogoutClick}/>;}else{button= <LoginButtononClick={this.handleLoginClick}/>;}return(<div> <GreetingisLoggedIn={isLoggedIn}/>{button}div>);}}ReactDOM.render(<LoginControl/>,document.getElementById('example'));
And operator
&& ¶ && which can easily conditionally render an element 3.9.3. React instance ¶
functionMailbox(props){constunreadMessages=props.unreadMessages;return( );}constmessages=['React','Re: React','Re:Re: React'];ReactDOM.render(Hello!
{unreadMessages.length>0&& You have {unreadMessages.length} unread messages.
} true && expression always return. expression , and false && expression always return. false . true , the element to the right of && will be rendered; if it is false , React will ignore and skip it. Ternary operator ¶
condition ? true : false。
render() { const isLoggedIn = this.state.isLoggedIn; return ( The user is {isLoggedIn ? 'currently' : 'not'} logged in. ); } it can also be used in larger expressions, although not very intuitive: render() { const isLoggedIn = this.state.isLoggedIn; return ( {isLoggedIn ? ( Prevent components from rendering ¶
render method returns null instead of its rendering results can be achieved. warn conditional rendering of the value of the If warn the value of``false`` the component does not render: 3.9.4. React instance ¶
functionWarningBanner(props){if(!props.warn){returnnull;}return( render method returns null does not affect the callback of the component’s lifecycle method. For example, componentWillUpdate and componentDidUpdate it can still be called.