React常用方法

给元素添加事件

<p onClick={console.log("click")}>click me!</p> //这个事件会直接执行，并且点击时不触发
<p onClick={()=>{console.log("click")}}>click me!</p> //如果写成回调函数的形式，则会点一次触发一次
<p onClick={()=>{this.Click()}}>click me!</p> //这种写法的意识是调用一个Click()方法

constructor(){}

constructor里可以编写需要的数据或状态

constructor() {
   super()
    this.state = {
        name: "name",
        show: false
    }
}

引用state里的数据

//引用state里的name，页面显示name
<p>{this.state.name}</p> 
//使用state里的状态，灵活改变字体颜色
<p style = {{color: this.state.show?'skyblue':'red'}}>{this.state.name}</p> 

JSX渲染数据

class Content extends Component {
    constructor() {
        super()
        this.state = {
            list: [
                {
                    name: "Baey",
                    age: 18
                },
                {
                    name: "Elise",
                    age: 19
                },
                {
                    name: "baot",
                    age: 20
                }
            ]
        }
    }
    render() {
        return (
            <div>
                <ul id="ul">
                    {
                        this.state.list.map((item,index)=>{
                            return(
                                <li key={index}>
                                    <p>姓名：{item.name}</p>
                                    <p>年龄：{item.age}</p>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

效果如下

if显示隐藏

{
   this.state.show?(
        <p>喜欢</p>
    ):(
        <p>不喜欢</p>
    )
}

setState(){}

class Content extends Component {
    constructor() {
        super()
        this.state = {
            show: false
        }
    }
    Click() {
    	//通过点击来切换show的状态
        this.state.show = !this.state.show
        //更新视图
        this.setState({
            show: this.state.show
        })
    }
    render() {
        return (
            <div className="">
                <p>{this.state.show?'喜欢':'不喜欢'}</p>
                <p onClick={()=>{this.Click()}}>click me!</p>
            </div>
        )
    }
}

如若不使用setState(){}来更新视图，那么视图将不会更新
效果如下

解决this指向问题

1.this.方法.bind(this)
2.箭头函数解决this 指向问题