React 第三天
第三天
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
- 把 自己的样式表,定义为.scss文件
- 把第三方的样式表,还是以.css结尾
- 我们只需要为自己的.scss文件,启用模块化即可
- 运行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 第三天的更多相关文章
- React Native 三端同构
React Native 三端同构 https://www.ibm.com/developerworks/cn/web/wa-universal-react-native/index.html rea ...
- 从0开始学习react(三)
这次我们来讲解第三节知识,考虑了下,先不去讲什么理论了,毕竟网上一搜一大堆,而且理论真心看不太懂啊!!! 今天我们就直接上实例喽! 大家HIGH起来!!!(想了好久,还是没舍得删这句话) 1.根据下图 ...
- React内三种函数的写法
以下提供三种React内函数的写法,都可以正常运行,有疑问可以留言 写法一:让函数内部的this指向这个类的实例,它是用bind实现的,bind的第一个参数表示context,就是this. //写 ...
- React Native 三:样式
一.声明和使用样式 1.React Native里面的样式和使用如以下所看到的.StyleSheet.create这个构造函数不是必须的. index.android.js文件 import Reac ...
- 前端笔记之React(三)使用动态样式表&antd&React脚手架&props实战
一.使用动态样式表 1.1 LESS使用 全局安装Less npm install -g less 创建1.less文件,然后可以用lessc命令来编译这个文件: lessc 1.less 1.css ...
- 从 Vue 的视角学 React(三)—— 事件处理
如果要处理某个元素的 click 事件,原生 js 可以直接为该元素添加一个 onclick 函数 Vue 封装了 v-on 指令,可以简化为 @click 并添加相应的函数 React 的开发思想是 ...
- 为什么学习React Native三点原因
React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...
- react第三单元(react组件的生命周期)
第三单元(react组件的生命周期) #课程目标 灵活掌握react组件的生命周期以及组件的活动过程. 能够灵活使用react的生命周期 #知识点 react的类组件的生命周期分为三个阶段 实例期 存 ...
- React组件三
<script> <!-- getDefalutPros 设置组件的默认值--> <!--var Mytitle=React.createClass({ getDefau ...
随机推荐
- 十款APP开发框架
对于大部分Web开发人员,HTML.CSS和 Java是他们最熟练的开发技能.然而,开发一个原生的移动App,对他们来说却是完全陌生的领域.因为开发Android,iOS 或 Windows Phon ...
- bzoj 2648: SJY摆棋子 KDtree + 替罪羊式重构
KDtree真的很妙啊,真的是又好写,作用还多,以后还需更多学习呀. 对于这道题,我们求的是曼哈顿距离的最小值. 而维护的变量和以往是相同的,就是横纵坐标的最小值与最大值. 我们设为一个极为巧妙且玄学 ...
- IOS - CoreData 增删改查
#pragma mark - Core Data Methods - (void)insertObjectWithFileName:(NSString *)fileName { /** SQL新增记录 ...
- BZOJ 3676 [Apio2014]回文串 (后缀自动机+manacher/回文自动机)
题目大意: 给你一个字符串,求其中回文子串的长度*出现次数的最大值 明明是PAM裸题我干嘛要用SAM做 回文子串有一个神奇的性质,一个字符串本质不同的回文子串个数是$O(n)$级别的 用$manach ...
- [luogu2513 HAOI2009] 逆序对数列 (计数dp)
题目描述 对于一个数列{ai},如果有iaj,那么我们称ai与aj为一对逆序对数.若对于任意一个由1~n自然数组成的数列,可以很容易求出有多少个逆序对数.那么逆序对数为k的这样自然数数列到底有多少个? ...
- django-7-django模型系统
<<<常用的模型字段类型>>>https://docs.djangoproject.com/en/2.1/ref/models/fields/#field-type ...
- where和having
where可以不能使用别名作为过滤条件,而having可以使用别名作为过滤条件. 在ORACLE中,select 语句的执行顺序是: 1. from语句 2. where语句(结合条件) 3. sta ...
- 读取bin文件,并且按结构体赋值打印
目标:读取一个bin文件,并且将bin文件中的数据,按字节对齐赋值给结构体,并且打印出结构体的内容 目前思路是简单的先将bin文件数据一次性读到一个数组中,再将数组强制转换为结构体 ] FILE *f ...
- 05006_Linux的jdk、mysql、tomcat安装
1.软件包下载链接:软件包下载 密码:advk 2.安装JDK (1)查看当前Linux系统是否已经安装java,输入 rpm -qa | grep java : (2)卸载两个openJDK (3) ...
- POJ 1715
同样是确定某位上的数,当确定某一位后,其后面的排列数是确定的,所以可以用除法和取余数的方法来确定这一位的值 #include <iostream> #include <cstdio& ...