条件渲染——示例文档

zhuanbike 2022-1-2 720

 // 条件渲染是什么   ---  根据状态的变化只渲染其中的一部分
        // 1.if语句    jsx中不允许有if
        class Com extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    bool:true
                }
            }
            fun(){
                    this.setState({
                        bool:!this.state.bool    
                    })
                }
            render(){
                let text;
                if(this.state.bool){
                    text="你好"
                }else{
                    text="你坏"
                }
                
                return(
                    <div>
                        我是组件
                        <button onClick={this.fun.bind(this)}>点我</button>
                        {text}
                        <p>三元运算符:{this.state.bool?"呵呵":"哈哈"}</p>
                    </div>
                )
            }
        }
            ReactDOM.render(<Com />,document.getElementById("demoReact"));


最新回复 (0)
发新帖