样式设置

行内样式的设置

行内样式的设置需要注意样式名要遵循驼峰式命名规则
style里面有两个花括号，第一个表示这里要插入JavaScript语法，第二个表示一个对象

import React, { Component } from 'react'

export default class test extends Component {
    render() {
        return (
            <div>
                <p style={{color:'#C40000',fontSize:'24px'}}>我是test组件里面的p标签</p>
            </div>
        )
    }
}

class名的样式设置
1 、在react中class是关键字，所以使用class名设置需要改成className来设置样式

.word{
    color: #C40000;
    font-size: 24px;
    font-weight: bold;
}

import React, { Component } from 'react'
import "./test.css"

export default class test extends Component {
    render() {
        return (
            <div>
                <p className="word">我是test组件里面的p标签</p>
            </div>
        )
    }
}

react中的事件定义

在react中，如果我们需要给DOM添加一个点击事件的话，要以行内样式的形式添加，只需要传入一个函数名就可以了，注意事件类型名字需要遵循驼峰式命名规则
这里onClick={this.click}为什么要用this，意思就是this就是当前test组件的这个实例，实例上有个方法叫做click，这里的click方法函数要用箭头函数，箭头函数没有this指向，最终指向当前实例组件，如果不用箭头函数，就会出现两个this指向，this指向不明确，就会出现报错，在这种情况下需要用bind函数前行改变this指向。。。。这个以后有机会在说！！！
ps：如果不知道this是什么的，需要好好补课es6的课程了！！！

import React, { Component } from 'react'

export default class test extends Component {
    click = () => {
        console.log(123)
    }
    render() {
        return (
            <div>
                <button onClick={this.click}>点击我吧</button>
            </div>
        )
    }
}

react中jsx的数组遍历操作

在react中，数组的遍历方法是用到了map方法，在es6中它是一个数组的方法，最终返回一个新的数组
我们如果需要写js语法的需要写在{}里面，每一个子元素p标签都需要加一个独一无二的key，方便react在遍历的过程中能够有效的识别。es6类组件都有一个构造器属性constructor，不过在这里的constructor是react生命周期里面的一个钩子函数，跟es6里面的构造器不一样的，需要注意，需要了解更多上官网了解react组件生命周期钩子函数。

import React, { Component } from 'react'

export default class test extends Component {
    constructor(){
        super()
        this.state={
            arr:['aa','bb','cc']
        }
    }
    render() {
        let {arr} = this.state
        console.log(arr)
        return (
            <div>
               {
                   arr.map((item,index) => {
                        return <p key={index}>{item}</p>
                   })
               }
            </div>
        )
    }
}