React条件渲染

在前端的开发当中，我们始终都要进行一些标签显隐，在vue中，由于vue.js的存在，我们可以使用v-if或者v-show对于一个标签进行显隐，而在React中，需要使用js中的判断语句去创建元素表示当前的状态，然后通过React来更新UI。

import React from 'react';
function Hello(props) {
    return <h1>hello world!</h1>;
}

function Hi(props) {
    return <h1>hi world!</h1>;
}
class ConditionRender extends React.Component{
    render(){
        if(false){
            return <Hello></Hello>
        }else{
            return <Hi></Hi>
        }
    }
}
export default ConditionRender;

以上代码在true的时候渲染hello world!在false的时候渲染hi world!;

在vue中：

<template>
  <div>
    <h1 v-if="true">hello world!</h1>
    <h1 v-else>hi world!</h1>
  </div>
</template>

使用三目运算符：

import React from 'react';

class ConditionRender extends React.Component{
    constructor() {
        super();
        this.state={display:false}
    }
    render(){
        return <div>
            <h1>
                {
                    this.state.display?"hello world!":"hi world!"
                }
            </h1>
        </div>
    }
}
export default ConditionRender;