React条件渲染和列表渲染及key

一、条件渲染

React中条件渲染和JavaScript运算符if和其他条件运算符一样，使用javascript运算符去创建元素表现当前状态，然后让React根据他们来更新ur，例如以下代码

1.if...else

    let button;
    if(this.state.islogin){
      button=<button onClick={this.outLogin}>退出</button> 
    } else{
      button=<button onClick={this.toLogin}>登录</button>;  
    }

2.三目运算符（条件）？表达式1：表达式2

 

 let button=this.state.islogin? 
   <button onClick={this.outLogin}>退出</button> :
   <button onClick={this.toLogin}>登录</button>;

3.&&运算符

二、列表渲染及key值

1.列表渲染：

1）第一次实验，我们如果在React中把一个数组放入类组件的实例对象的state中，我们直接输出会是什么结果，及以下组件的代码

import React from "react";
class List extends React.Component{

    constructor(props){
        super(props);
        this.state={
            data:[1,2,3,4],
        };
    }

    render(){
        return(
            <div>
                {this.state.data}
            </div>
        )
    }
}
export default List;

会输出1234,

2）第二次尝试，我们试着把this.state.data换成<li>1</li><li>2</li><li>3</li><li>4</li>,即如下代码

import React from "react";
class List extends React.Component{

    constructor(props){
        super(props);
        this.state={
            data:[1,2,3,4],
        };
    }

    render(){
        return(
            <div>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </div>
        )
    }
}
export default List;

会输出正常的li列表，如果我们想让data的输出也是这种格式我们应该怎么办，我们继续

3）第三次尝试 ，利用map函数进行转换，将其转换为第二次尝试的样子

import React from "react";
class List extends React.Component{

    constructor(props){
        super(props);
        this.state={
            data:[1,2,3,4],
        };
    }

    render(){
        var ret=this.state.data.map((item)=>{
            return <li>{item}</li>
        })
        return(
            <div>
               {ret}
            </div>
        )
    }
}
export default List;

这次输出是对的，但是会报错，因为我们并未给这数组添加key值，

 2.Key值，注意每个元素的key值都是唯一的，我们需要给数组添加key

import React from "react";
class List extends React.Component{

    constructor(props){
        super(props);
        this.state={
            data:[1,2,3,4],
        };
    }

    render(){
        var ret=this.state.data.map((item,index)=>{
            return <li key={index}>{item}</li>
        })
        return(
            <div>
               {ret}
            </div>
        )
    }
}
export default List;