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) 通过标签属性从组件外向组件内传递变 ...
随机推荐
- hdu 1506 直方图内最大矩形
题目传送门//res tp hdu 单调栈的经典问题 维护区间的左右边界计算面积即可 #include<iostream> #include<algorithm> #inclu ...
- gcc5+opencv4.0.1 "玄学"bug记录
近期需要使用OpenCV中的gpu加速的一些函数,需要重新编译OpenCV库文件. 由于本机安装的cuda9.0对编译器gcc的版本有要求,平时常用的gcc7.0用不了,所以选用了gcc5.5 . O ...
- 前缀和&二维前缀和
我们知道,数组上的前缀和S[i]=S[i-1]+a[i] 那么,怎样求二维前缀和呢? 二维前缀和: 绿色点的前缀和就是黄色.红色.灰色和绿色的点权和 怎样计算? s[i][j]=s[i-1][j]+s ...
- 同一台服务器请求easyswoole的一个websocket接口报错
求助大神啊!file_get_contents报这个错:failed to open stream: Connection timed out换成curl又报这个错:couldn't connect ...
- Ansible-批量导入key(入门)
系统是centos7.5 python2.75 yum install -y ansible ssh-keygen -t rsa vim /etc/ansible/hosts 定义的一个hello组: ...
- JavaScript设计模式(单例模式)
单例模式是一种简单但非常实用的模式,特别是惰性单例技术,在合适的时候才创建对象,并且只创建唯一的一个.下面我们来逐步了解单例模式的用法. 一.简版单例模式: var Singleton = funct ...
- gflags 编译动态库
gflags 编译动态库 这里涉及到gflags的安装,原来使用 sudo apt-get install libgflags-dev 但是后面有人在环境中下载安装了libgflags的安装包,解压后 ...
- STL之Deque的使用方法
STL 中类 stack 实现了一个栈 1)push 能够插入元素 2)pop 移除栈顶元素 使用的时候,需要包含头文件 #include <stack>,stack 被声明如下: nam ...
- Pr PS 笔记
1. 保存窗口配置 窗口-新建工作区 2. 添加快捷键 编辑-自定义快捷键 3. 添加关键帧,需要下拉轨道 4. 关闭PR声音 5. 视频稳定器 选中素材,右键选择嵌套,嵌套后在子序列把视频画 ...
- kali破解ssh
hydra,是一个非常好用的暴力破解工具,而且名字也很cool. 下面是官网上的介绍: AFP, Cisco AAA, Cisco auth, Cisco enable, CVS, Firebird, ...