React中的条件渲染

方法1.

 state={age:18}
   //条件渲染  方法1
   promtWelcome(){
      if(this.state.age>=18){
       return(<div>已经18岁</div>) 
      }else{
        return(<alert>未成年</alert>)
      }
   }
  render() {
    return (
      <div>{this.promtWelcome()}</div>
    )
  }

方法2

//声明状态数据
   state={age:16}
  

  render() {
    //条件渲染2
    let welcome=null
    if(this.state.age>=18){
       welcome=(<div>你哈，成年人</div>)
    }else{
      welcome=(<p>你好未成年</p>)
    }
    return (
      /* 不需要this */
      <div>{welcome}</div>
    )
  }

第三种方法

render(){
return(<div>{判断 ? ( jsx) : (jsx)}</div>)
}



 //声明状态数据
   state={age:16}
  

  render() {
    //条件渲染2
    return (
      /* 不需要this */
      <div>{this.state.age>=18 ? (<p>成年</p>) : (<p>你好年轻人</p>)}</div>
    )
  }
}

第四种

&&运算特点：表达式1为true ，表达式要执行；否则表达式2不执行

 state={age:26}
  

  render() {
    //条件渲染2
    return (
      /* 不需要this */
      <div>{this.state.age>=18 && (<div>欢迎成年人</div>)}</div>
    )
  }
}

最后

以上就是开放书本为你收集整理的React中的条件渲染的全部内容，希望文章能够帮你解决React中的条件渲染所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。