react java渲染_React 条件渲染简单演示

模拟根据登录情况判断要显示的欢迎界面

import React, { Component } from 'react';

import ReactDOM from'react-dom';

import'./index.css';

import App from'./App';

import* as serviceWorker from './serviceWorker';

import PropTypes from'prop-types';functionGreeting(props){

const state=props.state;if(state){return

}else{return

}

}functionUserGreeting(){return(

欢迎用户

)

}functionGuestGreeting(){return(

欢迎游客

)

}

ReactDOM.render(

document.getElementById('example')

);

serviceWorker.unregister();

元素变量，可以使用变量来储存元素

import React, { Component } from 'react';

import ReactDOM from'react-dom';

import'./index.css';

import App from'./App';

import* as serviceWorker from './serviceWorker';

import PropTypes from'prop-types';

class Logincontrol extends React.Component{

constructor(props){

super(props);this.LogoutHandler=this.LogoutHandler.bind(this);this.LoginHandler=this.LoginHandler.bind(this);this.state={

loginState:false}

}

LogoutHandler(){this.setState({

loginState:false})

}

LoginHandler(){this.setState({

loginState:true})

}

render(){

const loginState=this.state.loginState;

let button=null;if(loginState){//如果是登录状态

button=

}else{

button=

}return(

登录状态：{this.state.loginState?'已登录':'未登录'}

{button}

)

}

}functionLogoutBtn(props){return(退出登录

)

}functionLoginBtn(props){return(点击登录

)

}

ReactDOM.render(

document.getElementById('example')

);

serviceWorker.unregister();

可以通过用花括号包裹代码在 JSX 中嵌入任何表达式 ，也包括 JavaScript 的逻辑与 &&，它可以方便地条件渲染一个元素

import React, { Component } from 'react';

import ReactDOM from'react-dom';

import'./index.css';

import App from'./App';

import* as serviceWorker from './serviceWorker';

import PropTypes from'prop-types';functionMail(props){

const msg=props.msg;return(

{

msg.length>0 &&

共有{msg.length}条未读消息

}

)

}

const msg=['下午有空吗？','明天有空吗？'];

ReactDOM.render(

document.getElementById('example')

);

serviceWorker.unregister();

三目运算符

条件渲染的另一种方法是使用 JavaScript 的条件运算符

刚才的判断登录条件，可以修改为：

阻止组件渲染

让 render 方法返回 null 即可实现

组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。

例如，componentWillUpdate 和 componentDidUpdate 依然可以被调用

import React, { Component } from 'react';

import ReactDOM from'react-dom';

import'./index.css';

import App from'./App';

import* as serviceWorker from './serviceWorker';

import PropTypes from'prop-types';

class ShowWarning extends React.Component{

constructor(props){

super(props);this.showHide=this.showHide.bind(this);this.state={

warningState:true}

}

showHide(){this.setState(prevState=>({

warningState:!prevState.warningState

}))

}

hideHandler(){this.setState({

warningState:false})

}

render(){return(

{this.state.warningState?'隐藏':'显示'}

)

}

}functionWarnBanner(props){if(!props.warn){return null}else{return(

警告警告！！！

)

}

}

ReactDOM.render(

document.getElementById('example')

);

serviceWorker.unregister();

setState() 可以接收一个函数，这个函数接受两个参数

第一个参数表示上一个状态值，第二参数表示当前的 props

this.setState((prevState, props) =>({//do something here

}));