React-条件渲染

条件渲染

显示或隐藏

.hide{display:none}

import React,{Component} from 'react'
import './css/index/css' //引入上面的css文件
export default class App extends Component {
    state = {
        isHide:false
    }
    render () {
        return (
            <div>
                <div className={isHide?'hide':''}>1111111</div>
                <button onClick={this.isshow}>show/hide</button>
            </div>
        )
    }
    isshow = ()=>{
        this.setState({
            isHide:!this.state.isHide
        })
    }
}

创建或删除

import React,{Component} from 'react'
export default class App extends Component {
    state= {
        isshow:true
    }
    render () {
        let odiv = <div>11111111111</div>
        return (
            <div>
            {
                isshow?odiv:null
            }
                <button onClick={(prevState)=>{
                        this.setState({
                            isshow:!prevState.isshow
                        })
                    }}>show/hide</button>
            </div>
        )
    }
}