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) 通过标签属性从组件外向组件内传递变 ...
随机推荐
- PAT B1026.程序运行时间
AC代码 #include <cstdio> #define CLK_TCK 100 int main() { int C1, C2, C3; scanf("%d%d" ...
- django初步了解3
目录 JsonResponse模块 form表单上传文件 FBV与CBV django settings源码分析及实际应用 模板语法 模板传值 模板过滤器 标签 if标签 for标签 with标签 自 ...
- kdress学习
这两天看了一本书叫<linux二进制分析>,这里面提到的一个小工具kdress,这里分析一下 源码在:https://github.com/elfmaster/kdress kdress介 ...
- 如何用Mvc实现一个列表页面-异步加载
在接触Mvc后,开始有点觉得很累,什么都要自己做,完全没有WebForm的易用性: 大概用了一个月左右的时候,越用用顺手,就习惯了MVC的这种开发方式,灵活,简洁: 当初学习MVC,网上看资料,都是讲 ...
- arcgisJs之featureLayer中feature的获取
arcgisJs之featureLayer中feature的获取 在featureLayer中source可以获取到一个Graphic数组,但是这个数组属于原数据数组.当使用 applyEdits修改 ...
- vue入门:(class与style绑定)
对象语法 数组语法 一.对象语法 1.1对象语法绑定HTML Class 语法:v-bind:class="{'className1':boolean1,'className2':boole ...
- 实现表单label两端对齐
主要使用css3属性 text-align: justify; text-align-last: justify; 上代码: <ul> <li> <label class ...
- Nginx作为代理服务之正反代理
Nginx作为代理服务之正反代理 首先什么是代理,就跟明星的经纪人类似,比如作为苍老师经纪人的我,如果你们需要和苍老师拍小电影,可以跟我这个经纪人来商量比如价格啊,时间等相关信息,那么我就作为一个代理 ...
- idea 党用快捷键
实用快捷键: Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*...*/ )Ctrl+D 复制行Ctrl+X 删除行快速修复 alt+enter (modify/cast)代码提示 a ...
- 解决 'mvn' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
'mvn' 不是内部或外部命令,也不是可运行的程序 或批处理文件. 九步完成