React学习笔录1 数据绑定，属性，class, style, 本地图片， 列表渲染

1.数据的绑定 用{}

import React, {Component} from "react"

class MyHeader extends Component{
    constructor(props){
        super(props);
        this.state={
            msg:"这是一个信息"
        }
    }
    getProps(){
        console.log(this)
    }
    render(){
        console.log(this,"---render---")
        return(
            <div>
                <p>{this.state.msg}</p> //绑定数据
                <button onClick={this.getProps.bind(this)}>点金获取</button>
            </div>
        )
    }
}
export default MyHeader

2.属性的绑定

this.state={
   msg:"这是一个信息",
   title:"这是一个属性信息"
}

{/* 变量形式的属性 */}
<p className="red" title={this.state.title}>{this.state.msg}</p>

{/* 非变量形式的属性 */}
<p title='这是一个属性'>测试属性</p>

3.class的指定,第二个注释是jsx语法的注释方式

import '../css/head.css'  //首先引入css的文件

{/*class使用的是className属性，同理可以变量和非变量，上面的是非变量*/}

<p className="red" title={this.state.title}>{this.state.msg}</p>

4.label的For属性，因为是循环的关键字，所以用htmlFor替代

<label htmlFor="username">用户名</label>

<input type="text" id="username" />

5. style样式，变量的形式，变量是个json格式的数据 { json格式的数据 }

this.state={
   colorJson:{
      color: "red"
   }
}

{/* 未赋值的 */}
<p style={{color:"red"}} title='这是一个属性'>测试属性</p>

{/* 赋值的 */}
<p style={this.state.colorJson} title='这是一个属性'>测试属性</p>

6.引入本地的图片

import logo from '../logo.svg';  //本地图片要先引入，也可以用require的方式

<img src={logo} alt=""/> //通过变量的形式赋值给src

<img src="https://www.baidu.com/1.jpg" alt=""/> //如果是远程网络图片直接赋值即可

7.渲染列表

this.state={
        
  list:["111","222","333"]

}

render(){

   {/*列表循环要指定key*/}

   let list=this.state.list.map((val,k)=>{

       return <li key={k}>{val}</li>

   });

   return(

     <div>
       <ul>{list}</ul>
     </div>

   )
}