专栏首页编程微刊从零开始学习React-属性绑定(三)

从零开始学习React-属性绑定(三)

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

1:绑定一个属性的时候

直接写就可以了<div title={this.state.title}>绑定属性</div>,不需要像平时写属性那样加双引号,加了双引号就会绑定了字符串了。

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里面定义,再去模板里面取出也可以。

 <div  className="test">绑定class属性,我是红色的大字体</div>
<div  className={this.state.color}>定义红色的数据</div>

3:for要换成htmlFor

<label htmlFor="name">姓名</label>
<input id="name"></input>

4:style行内样式

<div style={{"color":'blue'}}>行内样式哦</div>
<div style={this.state.style}>行内样式哦</div>

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 (
        <div> 
        <p>{this.state.name}</p>
        
        {/* 1:class要换成className */}
        <div  className="test">绑定class属性,我是红色的大字体</div>
        <div  className={this.state.color}>定义红色的数据</div>
        
        {/* 2:for要换成htmlFor */}
        <label htmlFor="name">姓名</label>
        <input id="name"></input>
        
        {/* 3:style行内样式写法 */}
        <div style={{"color":'blue'}}>行内样式哦</div>
        <div style={this.state.style}>行内样式哦</div>
        </div>
        )
    }
}
export default Home;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery实现下拉框选中对应的div

    这是一个很简单的功能,jquery实现下拉框选中对应的div。 虽然简单但是会在项目之中经常会用到,尤其是统计的时候,按照不同类型或者不同的年月日来选择相对应...

    祈澈菇凉
  • Jquery+Ajax+Bootstrap Paginator实现分页的拼接

    祈澈菇凉
  • 后台添加菜单信息如何在前端循环遍历?

    前端页面模块,根据所属类别展示信息,点击子菜单的时候,会显示出具体产品特点,产品功能介绍的界面。

    祈澈菇凉
  • CSS,注意点!!!!!!!

    4、用css给body标签加个 margin:0(用于消除body边框和浏览器间的空白部分)

    Wyc
  • VUE.js高级

    首先先更正一下昨天发送内容的错误之处,对你造成的影响深表歉意。对照昨天的文章:ajax和vue.js(此处连接方便大家查看对照)中第6部分vue的事件与函数中,...

    小闫同学啊
  • GRID布局

    目前CSS布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一...

    WindrunnerMax
  • Android开发人员不得不学习的Vue.js基础

    Vue是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一...

    用户2802329
  • Vue里v-for循环双层数组

    任我行RQ
  • 关于表单重复提交问题

    问题引入:当我们在做一个页面数据提交的时候,当我们连续点击提交按钮,因为快速连续点击,因为速度过快,页面还来不及反应,导致页面从复提交。。

    小小许
  • Jquery选择器与样式操作

    jquery选择器 jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    对弈

扫码关注云+社区

领取腾讯云代金券