专栏首页编程微刊从零开始学习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 条评论
登录 后参与评论

相关文章

  • 从零开始学VUE之模板语法(绑定属性)

    当然不止能绑定src也能绑定其他属性,属性前加冒号就可以,就像 :src :href

    彼岸舞
  • 从零开始学 Web 之 DOM(三)innerText与innerHTML、自定义属性

    Daotin
  • 从零开始学习React-在react项目里面使用mock(七)

    从零开始学习React-开发环境的搭建(一) https://www.jianshu.com/p/97f3a1ba168e 从零开始学习React-目录结构...

    王小婷
  • 从零开始学 Web 之 CSS3(三)渐变,background属性

    渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变...

    Daotin
  • 从零开始学习React-五分钟上手Echarts折线图(十)

    在jQuery里面,我会经常用到Echarts统计图,那么就从自己熟悉的地方写,今天在我之前写的React项目里面使用一下折线图。

    王小婷
  • 从零开始学习X#(三)

    1. 使用任何您喜欢的编辑器(ahem, VI),然后使用命令行编译器进行编译。这是我留给读者自行探索的选项。

    加菲猫的VFP
  • 从零开始学习3D可视化之事件绑定

    先理解一下概念:事件,就是用户或者是浏览器执行的某种动作。例如:click、load等都是事件的名字。事件处理程序,就是响应事件的函数。事件处理程序的名字是以“...

    用户8763535
  • Vue学习(三)属性绑定和双向数据绑定

    一觉睡到小时候
  • 从零开始学习React-路由react-router配置(四)

    路由react-router可以实现根组件自动挂载其他不同的子组件,今天写一个路由的配置首先打开github搜索react-router,看一下上面有写好的示例...

    王小婷
  • 【从零开始学习Go语言】三.属于Go的Hello World

    前文学习: 【从零开始学习Go语言】一.初识Go语言 【从零开始学习Go语言】二.Go语言的安装 【从零开始学习Go语言】三.属于Go的Hello Wor...

    一只特立独行的兔先生
  • 【从零开始学习Go语言】三.属于Go的Hello World

    本教程使用的编辑器为Vs code 微软的一款开源的文本编辑器,可能有人说goland更好,聪明的人自由聪明的选择,如果需要使用goland但却没经济基础使用正...

    一只特立独行的兔先生
  • Seaborn从零开始学习教程(三)

    当处理一个数据集的时候,我们经常会想要先看看特征变量是如何分布的。这会让我们对数据特征有个很好的初始认识,同时也会影响后续数据分析以及特征工程的方法。本篇将会介...

    Python数据科学
  • 从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件

    如果我们在设置为原来宽高2倍的时候,就要先把获取的宽高转换成数字类型,再乘以2,这样操作比较麻烦,有没有简单的方法呢?

    Daotin
  • 从零开始学 Web 之 DOM(六)为元素绑定与解绑事件

    前导:如果一个按钮绑定了多个点击事件,那么点击按钮的时候只会执行最后一个点击事件,前面的点击事件都被覆盖了。那么如何为一个按钮绑定多个相同的事件,并且每个事件都...

    Daotin
  • 从零开始学习React-开发环境的搭建(一)

    其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到 了很多招聘要求上都是...

    王小婷
  • 从零开始学习React-引入Ant Design 组件(八)

    React中使用Antd教程文档: https://ant.design/docs/react/getting-started-cn

    王小婷
  • Web前端学习 第7章 Vue基础教程1 Vue概述

    Angular是谷歌公司开发的前端框架,在国外的用户比国内用户多很多,国内始终是不温不火的状态。

    学习猿地
  • 从零开始学VUE之模板语法(计算属性)

    使用计算属性简化 表达式操作,实现复用,一般计算属性都是只用getter的,一般不适用setter

    彼岸舞
  • 从零开始学VUE之模板语法(表单数据绑定)

    彼岸舞

扫码关注云+社区

领取腾讯云代金券