React组件(组件属性this.state和this.props,css样式修饰组件)
目录:
1、创建组件的第一种方式 function
2、将组件抽离为单独的jsx文件
3、省略.jsx后缀, 配置webpack设置根目录
4、创建组件的第二种方式--使用class关键字创建组件
5、组件私有数据this.state(一般使用ajax获取的数据)
6、有状态组件和无状态组件
7、在组件中使用style行内样式
8、使用css样式表美化组件
9、通过modules参数启用模块化
10、使用localIdentName来自定义模块化的类名
11、通过local和glocal设置类名是否被模块化
创建组件demo见react-helloworld
1、创建组件的第一种方式 function <--返回目录
// 创建组件的第一种方式(组件名称首字母必须大写)
function Hello() {
return <div>这是Hello组件</div>
}
ReactDOM.render(<Hello></Hello>, document.getElementById('app')) // 为组件传递props数据
function Hello2(props) { // props只读
return <div>这是Hello2组件, {props.id} + "--" + {props.name} + "--" + {props.age}</div>
}
var user = {id: 1, name: '张三', age: 20}
// ReactDOM.render(<Hello2 id={user.id} name={user.name}></Hello2>, document.getElementById('app'))
ReactDOM.render(<Hello2 {...user}></Hello2>, document.getElementById('app'))
指定组件this.props 属性默认值:
Hello2.defaultProps = {name: '张三', age: 20}
指定组件props属性的类型和必要性
Hello2.propTypes = {name: PropTypes.string.isRequired, age: PropTypes.number}
2、将组件抽离为单独的jsx文件 <--返回目录
src目录下创建components/Hello3.jsx
import React from 'react' // 为组件传递props数据
export default function Hello3(props) { // props只读
return <div>这是Hello3组件, {props.id} + "--" + {props.name} + "--" + {props.age}</div>
}
// export default Hello3
index.js
import React from 'react'
import ReactDOM from 'react-dom'
// 默认,如果不做配置,不能省略.jsx后缀
import Hello3 from './components/Hello3.jsx' // 将组件抽离为单独的jsx文件
ReactDOM.render(<Hello3 {...user}></Hello3>, document.getElementById('app'))
3、省略.jsx后缀, 配置webpack设置根目录 <--返回目录
webpack.config.js
var path = require('path') // 导入在内存中自动生成index页面的插件
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html' // 生成的内存中首页的名称
}); module.exports = {
mode: 'development',
plugins: [
htmlPlugin
],
module: {
rules:[
{ test:/\.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/ }
]
},
resolve: {
extensions: ['.js', '.jsx', '.json'], // 这些文件的后缀可以省略
alias: {
'@': path.join(__dirname, './src')
}
}
}
4、创建组件的第二种方式--使用class关键字创建组件 <--返回目录
src目录下创建components/Hello4.jsx
import React from 'react'
// import React, { Component } from 'react' 按需导入 class Hello4 extends React.Component {
render() {
return <div>基于class创建组件, {this.props.id} + '--' + {this.props.name}</div>
}
} export default Hello4
index.js
import React from 'react'
import ReactDOM from 'react-dom' import Hello4 from './components/Hello4.jsx' var user = {id: 1, name: '张三', age: 20}
ReactDOM.render(<Hello4 {...user}></Hello4>, document.getElementById('app'))
5、组件私有数据this.state(一般使用ajax获取的数据) <--返回目录
import React from 'react'
// import React, { Component } from 'react' 按需导入 class Hello4 extends React.Component {
constructor() {
super()
this.state = {
msg: 'hello react'
}
}
render() {
return <div>
基于class创建组件, {this.props.id} + '--' + {this.props.name}
<h4>{this.state.msg}</h4>
</div>
}
} export default Hello4
6、有状态组件和无状态组件 <--返回目录
1)使用class关键字创建的组件,有自己的私有数据和生命周期函数;有状态组件
2)使用function创建的组件,只有props,没有自己的私有数据和生命周期函数;无状态组件
组件+css样式demo见react-demo-comment
7、在组件中使用style行内样式 <--返回目录
组件CmtList
import React from 'react'
// import React, { Component } from 'react' 按需导入
import CmtItem from './CmtItem.jsx' class CmtList extends React.Component {
constructor() {
super()
this.state = {
commentList: [
{ id: 1, name: '张三', content: '呵呵,沙发' },
{ id: 2, name: '李四', content: '嘿嘿,板凳' },
{ id: 3, name: '王五', content: '嘻嘻,地板' }
]
}
}
render() {
// return <ul>
// {
// this.state.commentList.map(item =>
// <li key={item.id}>{item.id + "-" + item.name + "-" + item.content}</li>
// )
// }
// </ul> return <div>
{/* 在组件中使用style行内样式 */}
<h2 style={{fontWeight: 500, textAlign: 'center'}}>评论列表</h2>
{
this.state.commentList.map(item =>
<CmtItem key={item.id} {...item}></CmtItem>
)
}
</div>
}
} export default CmtList
组件CmtItem
import React from 'react' // 在组件中使用style行内样式并封装样式对象
const styles = {
liStyle: {
height: '50px',
width: '100px',
border: '1px dotted #ccc',
marginTop: '20px'
}
}
export default function CmtItem(item) {
return <li style={styles.liStyle}>
{"评论人: " + item.name}
<br />
{" 评论内容: " + item.content}
</li>
}
8、使用css样式表美化组件 <--返回目录
安装包 cnpm i style-loader css-loader -D
配置webpack.config.js
var path = require('path') // 导入在内存中自动生成index页面的插件
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html' // 生成的内存中首页的名称
}); module.exports = {
mode: 'development',
plugins: [
htmlPlugin
],
module: {
rules:[
{ test:/\.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/ },
{ test:/\.css$/, use: ['style-loader','css-loader'] }
]
},
resolve: {
extensions: ['.js', '.jsx', '.json'], // 这些文件的后缀可以省略
alias: {
'@': path.join(__dirname, './src')
}
}
}
创建css文件
.li-content {
height: 100px;
width: 400px;
border: 1px dotted #ccc;
margin-top: 20px;
line-height: 50px;
}
组件中使用css样式
import React from 'react'
import cssObj from '../css/CmtItem.css'
export default function CmtItem(item) {
return <li className="li-content">
{"评论人: " + item.name}
<br />
{" 评论内容: " + item.content}
</li>
}
9、通过modules参数启用模块化 <--返回目录
webpack.config.js配置启用css模块化:{ test:/\.css$/, use: ['style-loader','css-loader?modules'] }
CmtList.css
.liContent {
height: 100px;
width: 400px;
border: 1px dotted #ccc;
margin-top: 20px;
line-height: 50px;
}
CmtList2.jsx
import React from 'react' import cssObj from '../css/CmtItem.css'
console.log(cssObj) // Object { "liContent": "USDMSW5g9Ggx_NYZMVvCq" } export default function CmtItem(item) {
return <li className={cssObj.liContent}>
{"评论人: " + item.name}
<br />
{" 评论内容: " + item.content}
</li>
}
10、使用localIdentName来自定义模块化的类名 <--返回目录
例子:{ test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:6]']}
11、通过local和glocal设置类名是否被模块化 <--返回目录
默认是local,当样式不需要模块化时使用:global()
:global(.nav) {
color: red;
}
使用时,className="类名"
React组件(组件属性this.state和this.props,css样式修饰组件)的更多相关文章
- React组件三大属性之state
React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...
- [bootstrap] 基本css样式和组件
一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...
- 26-[Boostrap]-全局css样式,组件,控件
1.全局CSS样式 https://v3.bootcss.com/css/ <!DOCTYPE html> <html lang="zh-CN"> < ...
- JS 对html标签的属性的干预以及JS 对CSS 样式表属性的干预
-任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel= ...
- styled-components:解决react的css无法作为组件私有样式的问题
react中的css在一个文件中导入,是全局的,对其他组件标签都会有影响. 使用styled-components第三方模块来解决,并且styled-components还可以将标签和样式写到一起,作 ...
- class属性中为什会添加非样式的属性值?
来由 在一些插件中经常看到, 在class属性中出现一些跟样式无关的属性值, 这些值在css样式中没有对应定义, 但是在js中会根据这个值来给dom对象添加特殊的行为, 例如: jquery vali ...
- React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...
- 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
1.创建组件的方法 函数组件 class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
随机推荐
- Analyzing Polyline -- Codeforces Round #123 (Div. 2)
题意:https://codeforc.es/problemset/problem/195/D 求折线段数. 思路: 对pos进行sort,对不同区间段加k,两个dp处理不同k>0 or k&l ...
- 《深入理解 Java 虚拟机》学习笔记 -- 内存区域
<深入理解 Java 虚拟机>学习笔记 -- 内存区域 运行时数据区域 主要分为 6 部分: 程序计数器 虚拟机栈 本地方法栈 Java 堆 方法区 如图所示: 1. 程序计数器(线程私有 ...
- 18-Perl 错误处理
1.Perl 错误处理程序运行过程中,总会碰到各式各样的错误,比如打开一个不存在的文件.程序运行过程中如果出现错误就会停止,我们就需要使用一些检测方法来避免错误,从而防止程序退出.Perl 提供了多中 ...
- 10.Bash的安装
10.Bash的安装本节提供了在 Bash支持的不同系统上的基本安装指导.本版本支持 GNU操作系统,几乎每个 UNIX版本,以及几个非 UNIX 系统,例如 BeOS 和 Interix.还有针对 ...
- 国内有哪些好的JAVA社区
转载自 https://www.zhihu.com/question/29836842#answer-13737722 并发编程网 - ifeve.com 强烈推荐 ImportNew - 专注Jav ...
- 基于S7协议实现与西门子PLC通信
西门子PLC是目前工控行业市场占有额比较大的一款PLC,而且随着上位机的越来越普及, 有很多人开始考虑自己开发上位机实现与西门子PLC的通信,遇到的第一个问题就是数据通信. 其实西门子PLC提供的接口 ...
- Facebook团队合影
今晚公司年会,晚上有些人不去,我晚上要带孩子,也不去,大家就说那我们中午照个合照吧.没啥子准备,大家都一副油腻的样子.除了要去party的化了妆.
- O035、Nova Suspend / Rescue 操作详解
参考https://www.cnblogs.com/CloudMan6/p/5503501.html Suspend / Resume 有时候需要长时间暂停 instance , 可以通过 S ...
- 4.移动端自动化测试-API讲解
一.前置代码 1.导入driver对象 from appium import webdriver 2.声明手机驱动对象 只有声明驱动对象我们才可以让手机完成脚本的操作 driver = ...
- element-ui select
1. 组合 label <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...