码迷,mamicode.com
首页 > 其他好文 > 详细

React的条件渲染和列表渲染

时间:2020-03-02 00:42:39      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:必须   color   绑定   button   data   赋值   驼峰命名   document   react   

React事件

特点:
1/react事件,绑定事件的命名,驼峰命名法。
2/{},传入1个函数,而不是字符串

<button onClick={this.sendData}>传递helloworld给父元素</button>

事件对象:React返回的事件对象是代理的原生的事件对象,如果想要查看事件对象的具体值,必须之间输出事件对象的属性。

注意:
原生,阻止默认行为时,可以直接返回return false;
React中,阻止默认必须e.preventDefault();

 

React事件传参数

{/* 使用ES6箭头函数传递多个参数 */}
<button  onClick={(e)=>{this.parentEvent1(‘msg:helloworld‘,e)}}>提交</button>
{/* //不使用ES6箭头函数传递多个参数的方式 */}
<button  onClick={function(e){this.parentEvent1(‘不使用es6,msg:helloworld‘,e)}.bind(this)}>提交</button>

 

 

 

条件渲染

React中条件渲染即和JavaScript中,条件运算,如if...else...三元运算符等。

1/直接通过条件运算返回要渲染的JSX对象
2/通过条件运算得出jsx对象,在将JSX对象渲染到模板中。

案例一

//条件渲染一
function Login() {
    return (
        <div>
            <h1>欢迎登录</h1>
        </div>
    )
}

function LoginNeed() {
    return (
        <div>
            <h1>请先登录</h1>
        </div>
    )
}


class HelloWorld extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            isLogin:false
        }
    }
    render() {
        if(this.state.isLogin){
            return(
                <Login />
            )
        }else{
            return (
                <LoginNeed />
            )
        }
    }
}


ReactDOM.render(
    <HelloWorld />,
    document.querySelector(‘#root‘)
)

案例二

function Login() {
    return (
        <div>
            <h1>欢迎登录</h1>
        </div>
    )
}

function LoginNeed() {
    return (
        <div>
            <h1>请先登录</h1>
        </div>
    )
}


class HelloWorld extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            isLogin:true
        }
    }
    render() {
        let element = null
        if(this.state.isLogin){
            element = <Login />
        }else{
            element = <LoginNeed />
        }
        return (
            <div>
                {element}
            </div>
        )
    }
}

ReactDOM.render(
    <HelloWorld />,
    document.querySelector(‘#root‘)
)

案例一直接根据判断条件进行return,这样耦合性太强,而且很难增加新功能,

使用案例二这种将函数赋值给元素,大大提升了代码的复用性,而且可拓展能力加强

 

 

未完待续...

 

React的条件渲染和列表渲染

标签:必须   color   绑定   button   data   赋值   驼峰命名   document   react   

原文地址:https://www.cnblogs.com/asdaa/p/12393001.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!