组件加name属性_从零开始学习React-属性绑定（三）

Tips：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子

前面两节用的是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;