从零开始学习React-属性绑定（三）

前面两节用的是HBuilder编辑器，很多童鞋说Visual Studio Code很好用，确实如此，因为平时开发用习惯了前者，写教程的时候，为了方便大家体验，这一节换成VS了，打开编辑器，首先导入项目，然后在编辑器里面选择打开终端选项，新建终端，输入命令使用yarn start或者npm start，运行项目。

1：绑定一个属性的时候

直接写就可以了

绑定属性

，不需要像平时写属性那样加双引号，加了双引号就会绑定了字符串了。

2：绑定class属性，class要换成className

打开静态资源，asset/css/index.css，写上css相关代码

.test{
  font-size: 40px;;
  color:red;
}

写好之后，在组建Home.js里面引入index.css，引入方法import '../asset/css/index.css',在render()模板里面使用属性 className="test"，这个时候就可以看到，属性绑定成功了,同理，现再this.state里面定义，再去模板里面取出也可以。

 
绑定class属性,我是红色的大字体
定义红色的数据

3：for要换成htmlFor

姓名

4：style行内样式

行内样式哦
行内样式哦

Home.js

import React, { Component } from 'react';

import '../asset/css/index.css'
class Home extends Component {
    constructor(){
        super();
        //react定义数据
        this.state={
            name:'我是一个组件页面哦',
            title:'我是一个title',
            color:'test',
            style:{
                color:'blue',
                fontSize:'80px'
                
            }
        }
    }
    render() {
        return (
        
 
        
{this.state.name}
        
        {/* 1：class要换成className */}
        
绑定class属性,我是红色的大字体
        
定义红色的数据
        
        {/* 2:for要换成htmlFor */}
        姓名
        
        
        {/* 3：style行内样式写法 */}
        
行内样式哦
        
行内样式哦
        
        )
    }
}
export default Home;