React学习之 创建组件_绑定属性_引入图片_改变this指向等总结

(一)  React 创建组件、绑定属性( 绑定class  绑定style)、引入图片  循环数组渲染数据

1. 所有的模板要被一个根节点包含起来
2. 模板元素不要加引号
3. {}绑定数据  
4. 绑定属性注意：

   class 要变成 className

   for 要变成 htmlFor        （因为class和for 为JS中的关键字）

   style属性和以前的写法有些不一样

   <div style={{'color':'blue'}}>{this.state.title}</div>
   
   <div style={{'color':this.state.color}}>{this.state.title}</div>

5. 循环数据要加key    （注:  map(value,key)    value和key 要先写value ）
6. 组件的构造函数中一定要注意 super
   1. 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象

   2. constructor(props){
              super(props);  /*用于父子组件传值  固定写法*/
              this.state={
                  userinfo:'张三'
              }
          }

　　7. 组件名称首字母大写、组件类名称首字母大写

---

(二) React定义方法的几种方式 获取数据 改变数据 执行方法传值

　　在以类继承的方式定义的组件中，为了能方便地调用当前组件的其他成员方法或属性（如：this.state），通常需要将事件处理函数运行时的 this 指向当前组件实例。

　　绑定事件处理函数this的三种方法：

1. 第一种方法： 在点击事件上绑定this

   run(){
             alert(this.state.name)
        }
   
   
   <button onClick={this.run.bind(this)}>按钮</button> 

2. 第二种方法  构造函数中进行绑定this

   　　 构造函数中改变
   
       this.run = this.run.bind(this);
   
   
        run(){
               alert(this.state.name)
        }
   
   
        <button onClick={this.run>按钮</button>

3. 第三种方法  箭头函数绑定this（常用的） 

    run=()=> {
               alert(this.state.name)
         }
   
    <button onClick={this.run>按钮</button>

---

　　　　

　　选择苦挨 放逐他漂流人海

　　　　　　　　　　　　--失语者