React 条件渲染

学习目标

• if-else 条件渲染
• 三元符条件渲染

实例一 直接返回JSX对象

import React from 'react';
import ReactDOM from 'react-dom';
function UserGreet(props) { // 函数组件
  return (<h1>欢迎登录</h1>)
}
function UserLogin(props) {
  return (<h1>请先登录</h1>)  
}
class ParenetCom extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLogin: false  
    }
  }
  render() {
    if (this.state.isLogin) {
        return (<UserGreet/>)
    } else {
      return (<UserLogin/>)
    }
  }
}
ReactDOM.render(
  <ParenetCom />, // 渲染父元素
  document.querySelector('#root') //寻找文件对象
)

实例二 通过变量返回JSX对象

import React from 'react';
import ReactDOM from 'react-dom';
function UserGreet(props) { // 函数组件
  return (<h1>欢迎登录</h1>)
}
function UserLogin(props) {
  return (<h1>请先登录</h1>)  
}
class ParenetCom extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLogin: false  
    }
  }
  render() {
    let ele = null;
    if (this.state.isLogin) {
        ele = <UserGreet/>;
    } else {
        ele = <UserLogin/>;
    }
    return (
      <div>
        <h1>header</h1>
          {ele}
        <h1>三元运算符操作</h1>
        {this.state.isLogin?<UserGreet/>:<UserLogin/>}
        <h1>footer</h1>
      </div>
    )
  }
}
ReactDOM.render(
  <ParenetCom />, // 渲染父元素
  document.querySelector('#root') //寻找文件对象
)