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

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('