目录:

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   <--返回目录

  1. // 创建组件的第一种方式(组件名称首字母必须大写)
  2. function Hello() {
  3. return <div>这是Hello组件</div>
  4. }
  5. ReactDOM.render(<Hello></Hello>, document.getElementById('app'))
  6.  
  7. // 为组件传递props数据
  8. function Hello2(props) { // props只读
  9.   return <div>这是Hello2组件, {props.id} + "--" + {props.name} + "--" + {props.age}</div>
  10. }
  11. var user = {id: 1, name: '张三', age: 20}
  12. // ReactDOM.render(<Hello2 id={user.id} name={user.name}></Hello2>, document.getElementById('app'))
  13. ReactDOM.render(<Hello2 {...user}></Hello2>, document.getElementById('app'))

  

  import PropTypes from 'prop-types'

  指定组件this.props 属性默认值:

  Hello2.defaultProps = {name: '张三', age: 20}

  指定组件props属性的类型和必要性

  Hello2.propTypes = {name: PropTypes.string.isRequired, age: PropTypes.number}

2、将组件抽离为单独的jsx文件   <--返回目录

  src目录下创建components/Hello3.jsx

  1. import React from 'react'
  2.  
  3. // 为组件传递props数据
  4. export default function Hello3(props) { // props只读
  5. return <div>这是Hello3组件, {props.id} + "--" + {props.name} + "--" + {props.age}</div>
  6. }
  7. // export default Hello3

  index.js

  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  3. // 默认,如果不做配置,不能省略.jsx后缀
  4. import Hello3 from './components/Hello3.jsx'
  5.  
  6. // 将组件抽离为单独的jsx文件
  7. ReactDOM.render(<Hello3 {...user}></Hello3>, document.getElementById('app'))

3、省略.jsx后缀, 配置webpack设置根目录   <--返回目录

  webpack.config.js

  1. var path = require('path')
  2.  
  3. // 导入在内存中自动生成index页面的插件
  4. const HtmlWebPackPlugin = require('html-webpack-plugin')
  5. const htmlPlugin = new HtmlWebPackPlugin({
  6. template: path.join(__dirname, './src/index.html'),
  7. filename: 'index.html' // 生成的内存中首页的名称
  8. });
  9.  
  10. module.exports = {
  11. mode: 'development',
  12. plugins: [
  13. htmlPlugin
  14. ],
  15. module: {
  16. rules:[
  17. { test:/\.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/ }
  18. ]
  19. },
  20. resolve: {
  21. extensions: ['.js', '.jsx', '.json'], // 这些文件的后缀可以省略
  22. alias: {
  23. '@': path.join(__dirname, './src')
  24. }
  25. }
  26. }

4、创建组件的第二种方式--使用class关键字创建组件   <--返回目录

  src目录下创建components/Hello4.jsx

  1. import React from 'react'
  2. // import React, { Component } from 'react' 按需导入
  3.  
  4. class Hello4 extends React.Component {
  5. render() {
  6. return <div>基于class创建组件, {this.props.id} + '--' + {this.props.name}</div>
  7. }
  8. }
  9.  
  10. export default Hello4

  index.js

  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  3.  
  4. import Hello4 from './components/Hello4.jsx'
  5.  
  6. var user = {id: 1, name: '张三', age: 20}
  7. ReactDOM.render(<Hello4 {...user}></Hello4>, document.getElementById('app'))

5、组件私有数据this.state(一般使用ajax获取的数据)   <--返回目录

  1. import React from 'react'
  2. // import React, { Component } from 'react' 按需导入
  3.  
  4. class Hello4 extends React.Component {
  5. constructor() {
  6. super()
  7. this.state = {
  8. msg: 'hello react'
  9. }
  10. }
  11. render() {
  12. return <div>
  13. 基于class创建组件, {this.props.id} + '--' + {this.props.name}
  14. <h4>{this.state.msg}</h4>
  15. </div>
  16. }
  17. }
  18.  
  19. export default Hello4

6、有状态组件和无状态组件   <--返回目录

  1)使用class关键字创建的组件,有自己的私有数据和生命周期函数;有状态组件

  2)使用function创建的组件,只有props,没有自己的私有数据和生命周期函数;无状态组件

组件+css样式demo见react-demo-comment

7、在组件中使用style行内样式   <--返回目录

  组件CmtList

  1. import React from 'react'
  2. // import React, { Component } from 'react' 按需导入
  3. import CmtItem from './CmtItem.jsx'
  4.  
  5. class CmtList extends React.Component {
  6. constructor() {
  7. super()
  8. this.state = {
  9. commentList: [
  10. { id: 1, name: '张三', content: '呵呵,沙发' },
  11. { id: 2, name: '李四', content: '嘿嘿,板凳' },
  12. { id: 3, name: '王五', content: '嘻嘻,地板' }
  13. ]
  14. }
  15. }
  16. render() {
  17. // return <ul>
  18. // {
  19. // this.state.commentList.map(item =>
  20. // <li key={item.id}>{item.id + "-" + item.name + "-" + item.content}</li>
  21. // )
  22. // }
  23. // </ul>
  24.  
  25. return <div>
  26. {/* 在组件中使用style行内样式 */}
  27. <h2 style={{fontWeight: 500, textAlign: 'center'}}>评论列表</h2>
  28. {
  29. this.state.commentList.map(item =>
  30. <CmtItem key={item.id} {...item}></CmtItem>
  31. )
  32. }
  33. </div>
  34. }
  35. }
  36.  
  37. export default CmtList

  组件CmtItem

  1. import React from 'react'
  2.  
  3. // 在组件中使用style行内样式并封装样式对象
  4. const styles = {
  5. liStyle: {
  6. height: '50px',
  7. width: '100px',
  8. border: '1px dotted #ccc',
  9. marginTop: '20px'
  10. }
  11. }
  12. export default function CmtItem(item) {
  13. return <li style={styles.liStyle}>
  14. {"评论人: " + item.name}
  15. <br />
  16. {" 评论内容: " + item.content}
  17. </li>
  18. }

8、使用css样式表美化组件  <--返回目录

  安装包 cnpm i style-loader css-loader -D

  配置webpack.config.js

  1. var path = require('path')
  2.  
  3. // 导入在内存中自动生成index页面的插件
  4. const HtmlWebPackPlugin = require('html-webpack-plugin')
  5. const htmlPlugin = new HtmlWebPackPlugin({
  6. template: path.join(__dirname, './src/index.html'),
  7. filename: 'index.html' // 生成的内存中首页的名称
  8. });
  9.  
  10. module.exports = {
  11. mode: 'development',
  12. plugins: [
  13. htmlPlugin
  14. ],
  15. module: {
  16. rules:[
  17. { test:/\.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/ },
  18. { test:/\.css$/, use: ['style-loader','css-loader'] }
  19. ]
  20. },
  21. resolve: {
  22. extensions: ['.js', '.jsx', '.json'], // 这些文件的后缀可以省略
  23. alias: {
  24. '@': path.join(__dirname, './src')
  25. }
  26. }
  27. }

  创建css文件

  1. .li-content {
  2. height: 100px;
  3. width: 400px;
  4. border: 1px dotted #ccc;
  5. margin-top: 20px;
  6. line-height: 50px;
  7. }

  组件中使用css样式

  1. import React from 'react'
  2. import cssObj from '../css/CmtItem.css'
  3. export default function CmtItem(item) {
  4. return <li className="li-content">
  5. {"评论人: " + item.name}
  6. <br />
  7. {" 评论内容: " + item.content}
  8. </li>
  9. }

9、通过modules参数启用模块化   <--返回目录

  webpack.config.js配置启用css模块化:{ test:/\.css$/, use: ['style-loader','css-loader?modules'] }

  CmtList.css

  1. .liContent {
  2. height: 100px;
  3. width: 400px;
  4. border: 1px dotted #ccc;
  5. margin-top: 20px;
  6. line-height: 50px;
  7. }

  CmtList2.jsx

  1. import React from 'react'
  2. import cssObj from '../css/CmtItem.css'
  3. console.log(cssObj) // Object { "liContent": "USDMSW5g9Ggx_NYZMVvCq" }
  4.  
  5. export default function CmtItem(item) {
  6. return <li className={cssObj.liContent}>
  7. {"评论人: " + item.name}
  8. <br />
  9. {" 评论内容: " + item.content}
  10. </li>
  11. }

10、使用localIdentName来自定义模块化的类名   <--返回目录

  例子:{ test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:6]']}

11、通过local和glocal设置类名是否被模块化   <--返回目录

  默认是local,当样式不需要模块化时使用:global()

  1. :global(.nav) {
  2. color: red;
  3. }

  使用时,className="类名"

 

React组件(组件属性this.state和this.props,css样式修饰组件)的更多相关文章

  1. React组件三大属性之state

    React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...

  2. [bootstrap] 基本css样式和组件

    一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...

  3. 26-[Boostrap]-全局css样式,组件,控件

    1.全局CSS样式 https://v3.bootcss.com/css/ <!DOCTYPE html> <html lang="zh-CN"> < ...

  4. JS 对html标签的属性的干预以及JS 对CSS 样式表属性的干预

      -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写   以下是一段js 作用于 css 的 href的 代码   <link id="l1" rel= ...

  5. styled-components:解决react的css无法作为组件私有样式的问题

    react中的css在一个文件中导入,是全局的,对其他组件标签都会有影响. 使用styled-components第三方模块来解决,并且styled-components还可以将标签和样式写到一起,作 ...

  6. class属性中为什会添加非样式的属性值?

    来由 在一些插件中经常看到, 在class属性中出现一些跟样式无关的属性值, 这些值在css样式中没有对应定义, 但是在js中会根据这个值来给dom对象添加特殊的行为, 例如: jquery vali ...

  7. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  8. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  9. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

随机推荐

  1. hdu 1506 直方图内最大矩形

    题目传送门//res tp hdu 单调栈的经典问题 维护区间的左右边界计算面积即可 #include<iostream> #include<algorithm> #inclu ...

  2. gcc5+opencv4.0.1 "玄学"bug记录

    近期需要使用OpenCV中的gpu加速的一些函数,需要重新编译OpenCV库文件. 由于本机安装的cuda9.0对编译器gcc的版本有要求,平时常用的gcc7.0用不了,所以选用了gcc5.5 . O ...

  3. 前缀和&二维前缀和

    我们知道,数组上的前缀和S[i]=S[i-1]+a[i] 那么,怎样求二维前缀和呢? 二维前缀和: 绿色点的前缀和就是黄色.红色.灰色和绿色的点权和 怎样计算? s[i][j]=s[i-1][j]+s ...

  4. 同一台服务器请求easyswoole的一个websocket接口报错

    求助大神啊!file_get_contents报这个错:failed to open stream: Connection timed out换成curl又报这个错:couldn't connect ...

  5. Ansible-批量导入key(入门)

    系统是centos7.5 python2.75 yum install -y ansible ssh-keygen -t rsa vim /etc/ansible/hosts 定义的一个hello组: ...

  6. JavaScript设计模式(单例模式)

    单例模式是一种简单但非常实用的模式,特别是惰性单例技术,在合适的时候才创建对象,并且只创建唯一的一个.下面我们来逐步了解单例模式的用法. 一.简版单例模式: var Singleton = funct ...

  7. gflags 编译动态库

    gflags 编译动态库 这里涉及到gflags的安装,原来使用 sudo apt-get install libgflags-dev 但是后面有人在环境中下载安装了libgflags的安装包,解压后 ...

  8. STL之Deque的使用方法

    STL 中类 stack 实现了一个栈 1)push 能够插入元素 2)pop 移除栈顶元素 使用的时候,需要包含头文件 #include <stack>,stack 被声明如下: nam ...

  9. Pr PS 笔记

    1. 保存窗口配置    窗口-新建工作区 2. 添加快捷键  编辑-自定义快捷键 3. 添加关键帧,需要下拉轨道 4. 关闭PR声音 5. 视频稳定器 选中素材,右键选择嵌套,嵌套后在子序列把视频画 ...

  10. kali破解ssh

    hydra,是一个非常好用的暴力破解工具,而且名字也很cool. 下面是官网上的介绍: AFP, Cisco AAA, Cisco auth, Cisco enable, CVS, Firebird, ...