第三天

01:在组件中使用style行内对象并封装样式对象:

CmtItem.jsx:

import React from 'react'

//第一层封装 将样式对象和UI结构分离

// const itemStyle = { border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 10px #ccc' }

// const userStyle = { fontSize: '14px' }

// const contentStyle = { fontSize: '12px' }

//第二层封装 合并成一个大的样式对象

//const styles = {

//     item: { border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 10px #ccc' }

//     user: { fontSize: '14px' },

//     content: { fontSize: '12px' }

// }

//第三层封装 抽离为单独的样式表模块

import style from '@/components/styles';

//使用 function 构造函数,定义普通的无状态组件

export default function CmtItem(props) {

return (

<div style={style.item}>

{

<div key={props.id}>

<h1 style={style.user}>评论人:{props.user}</h1>

<p style={style.content}>评论内容:{props.content}</p>

</div>

}

</div>

)

}

02:使用css样式表美化组件

第一步:

npm install style-loader style-loader css-loader –save-dev

第二步:

webpack.config.js:

webpack发现.css文件后会从右往左的顺序先交给css-loader来处理,然后交给style-loader来处理,然后交给webpack进行打包

第三步:

第四步:

03.演示React中使用普通css样式表的作用域冲突问题

直接引入的组件是全局作用域生效的,

在Vue.js中可以通过<style scoped></style> 来解决这个问题,在React中,没有scoped,因为React.js根本没有指令的概念

04.为普通样式表通过modules参数启用模块化

第一步:启用模块化

第二步:对象.类名

05.使用localldentName来自定义模块化的类名

webpack.config.js:

npm run dev:

06.通过local和gobal设置类名是否被模块化

默认情况下,不用写:local() 所有类名和id都被模块化了。

07.在项目中为scss和less文件启用模块化

npm install bootstrap@3.3.7 –save

import bootcss from 'bootstrap/dist/css/bootstrap.css'

发现报错

npm install url-loader -D//打包处理字体文件的loader

url-loader依赖于file-loader:

npm install file-loader –D//安装下file-loader

//自己规定 第三方的样式表 都是以.css结尾

//自己的样式表,都要以.scss或.less结尾 这样,我们不要为普通的.css启用模块化

//自己的样式表,都要以.scss或.less结尾,只为.scss或.less文件启用模块化

npm install sass-loader node-sass –D

##在项目中启用模块化并同时使用bootstrap

  1. 把 自己的样式表,定义为.scss文件
  2. 把第三方的样式表,还是以.css结尾
  3. 我们只需要为自己的.scss文件,启用模块化即可
  4. 运行npm install sass-loader node-sass –D安装能够解析scss文件的loader

(这个没有写错,就是写sass 虽然是解析scss)

然后就可以这么用了

也不用再暴露什么了:

08.在React中为按钮绑定点击事件

React中事件使用camelCase

原生的JavaScript中使用onlick在React中使用onClick

问题:为什么这里调用的时候要用this呢?

答:

在一个实例方法中调用另外的方法,要写this。render函数就是一个实例方法。

在React中使用最多的事件绑定方式是

<button onClick={()=>this.show(‘传参’)}>按钮</button>

//事件的处理函数,需要定义为 一个箭头函数然后赋值给 函数名称

show = (arg1)=>{

console.log(‘show方法’ + arg1 )

}

09.使用this.setState来修改state上的数据

在React中,如果要修改数据,不要使用this.state.msg = … 这样直接修改。

而是应该使用 this.setState({msg:…})

示例代码:

import React, { Component } from 'react'

import { ENGINE_METHOD_DIGESTS } from 'constants';

export default class BindEvent extends Component {

constructor() {

super()

this.state = {

msg:'哈哈',

}

}

render() {

return (

<div>

{/* 需求 点击按钮,修改msg的值 */}

<button onClick={() => this.show('

React 第三天的更多相关文章

  1. React Native 三端同构

    React Native 三端同构 https://www.ibm.com/developerworks/cn/web/wa-universal-react-native/index.html rea ...

  2. 从0开始学习react(三)

    这次我们来讲解第三节知识,考虑了下,先不去讲什么理论了,毕竟网上一搜一大堆,而且理论真心看不太懂啊!!! 今天我们就直接上实例喽! 大家HIGH起来!!!(想了好久,还是没舍得删这句话) 1.根据下图 ...

  3. React内三种函数的写法

     以下提供三种React内函数的写法,都可以正常运行,有疑问可以留言 写法一:让函数内部的this指向这个类的实例,它是用bind实现的,bind的第一个参数表示context,就是this. //写 ...

  4. React Native 三:样式

    一.声明和使用样式 1.React Native里面的样式和使用如以下所看到的.StyleSheet.create这个构造函数不是必须的. index.android.js文件 import Reac ...

  5. 前端笔记之React(三)使用动态样式表&antd&React脚手架&props实战

    一.使用动态样式表 1.1 LESS使用 全局安装Less npm install -g less 创建1.less文件,然后可以用lessc命令来编译这个文件: lessc 1.less 1.css ...

  6. 从 Vue 的视角学 React(三)—— 事件处理

    如果要处理某个元素的 click 事件,原生 js 可以直接为该元素添加一个 onclick 函数 Vue 封装了 v-on 指令,可以简化为 @click 并添加相应的函数 React 的开发思想是 ...

  7. 为什么学习React Native三点原因

    React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...

  8. react第三单元(react组件的生命周期)

    第三单元(react组件的生命周期) #课程目标 灵活掌握react组件的生命周期以及组件的活动过程. 能够灵活使用react的生命周期 #知识点 react的类组件的生命周期分为三个阶段 实例期 存 ...

  9. React组件三

    <script> <!-- getDefalutPros 设置组件的默认值--> <!--var Mytitle=React.createClass({ getDefau ...

随机推荐

  1. 十款APP开发框架

    对于大部分Web开发人员,HTML.CSS和 Java是他们最熟练的开发技能.然而,开发一个原生的移动App,对他们来说却是完全陌生的领域.因为开发Android,iOS 或 Windows Phon ...

  2. bzoj 2648: SJY摆棋子 KDtree + 替罪羊式重构

    KDtree真的很妙啊,真的是又好写,作用还多,以后还需更多学习呀. 对于这道题,我们求的是曼哈顿距离的最小值. 而维护的变量和以往是相同的,就是横纵坐标的最小值与最大值. 我们设为一个极为巧妙且玄学 ...

  3. IOS - CoreData 增删改查

    #pragma mark - Core Data Methods - (void)insertObjectWithFileName:(NSString *)fileName { /** SQL新增记录 ...

  4. BZOJ 3676 [Apio2014]回文串 (后缀自动机+manacher/回文自动机)

    题目大意: 给你一个字符串,求其中回文子串的长度*出现次数的最大值 明明是PAM裸题我干嘛要用SAM做 回文子串有一个神奇的性质,一个字符串本质不同的回文子串个数是$O(n)$级别的 用$manach ...

  5. [luogu2513 HAOI2009] 逆序对数列 (计数dp)

    题目描述 对于一个数列{ai},如果有iaj,那么我们称ai与aj为一对逆序对数.若对于任意一个由1~n自然数组成的数列,可以很容易求出有多少个逆序对数.那么逆序对数为k的这样自然数数列到底有多少个? ...

  6. django-7-django模型系统

    <<<常用的模型字段类型>>>https://docs.djangoproject.com/en/2.1/ref/models/fields/#field-type ...

  7. where和having

    where可以不能使用别名作为过滤条件,而having可以使用别名作为过滤条件. 在ORACLE中,select 语句的执行顺序是: 1. from语句 2. where语句(结合条件) 3. sta ...

  8. 读取bin文件,并且按结构体赋值打印

    目标:读取一个bin文件,并且将bin文件中的数据,按字节对齐赋值给结构体,并且打印出结构体的内容 目前思路是简单的先将bin文件数据一次性读到一个数组中,再将数组强制转换为结构体 ] FILE *f ...

  9. 05006_Linux的jdk、mysql、tomcat安装

    1.软件包下载链接:软件包下载 密码:advk 2.安装JDK (1)查看当前Linux系统是否已经安装java,输入 rpm -qa | grep java : (2)卸载两个openJDK (3) ...

  10. POJ 1715

    同样是确定某位上的数,当确定某一位后,其后面的排列数是确定的,所以可以用除法和取余数的方法来确定这一位的值 #include <iostream> #include <cstdio& ...