目录:

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

  

  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

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样式修饰组件)的更多相关文章

  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. 初遇PHP(一)

    因为想给自己弄一个微信公众号,顺便提升一下自己,所以有了以下内容,本次学习的最终目标是能用php制作套微信公众号,然后转成Java.为什么要这么麻烦呢,其一是买的资料书是php的,其二是顺水推舟刚好可 ...

  2. 异或运算符(^)、与运算符(&)、或运算符(|)、反运算符(~)、右移运算符(>>)、无符号右移运算符(>>>)

    目录 异或(^).异或和 的性质及应用总结 异或的含义 异或的性质:满足交换律和结合律 异或的应用 按位 与运算符(&) 按位 或运算符(|) 取 反运算符(~) 右移运算符(>> ...

  3. 代码优化:Java编码技巧之高效代码50例

    出处:  Java编码技巧之高效代码50例 1.常量&变量 1.1.直接赋值常量值,禁止声明新对象 直接赋值常量值,只是创建了一个对象引用,而这个对象引用指向常量值. 反例: Long i = ...

  4. C# 使用Emit实现动态AOP框架 进阶篇之优化

    目  录 C# 使用Emit实现动态AOP框架 (一) C# 使用Emit实现动态AOP框架 (二) C# 使用Emit实现动态AOP框架 (三) C# 使用Emit实现动态AOP框架 进阶篇之异常处 ...

  5. luogu题解P2502[HAOI2006]旅行--最小生成树变式

    题目链接 https://www.luogu.org/problemnew/show/P2502 分析 一个很\(naive\)的做法是从\(s\)到\(t\)双向BFS这当然会TLE 这时我就有个想 ...

  6. 学习笔记--Tarjan算法之割点与桥

    前言 图论中联通性相关问题往往会牵扯到无向图的割点与桥或是下一篇博客会讲的强连通分量,强有力的\(Tarjan\)算法能在\(O(n)\)的时间找到割点与桥 定义 若您是第一次了解\(Tarjan\) ...

  7. (二)创建基于maven的javaFX项目

    首先使用IDEA创建一个javaFX项目 点击finish,这就创建完成了JavaFX项目,只有将其转换为maven项目即可,如图:

  8. Guava动态调用方法

    前言 大家在Coding的时候,经常会遇到这样一个情况,根据不同的条件去执行对应的代码.我们通常的处理方式是利用if-else判断,或者直接switch-case,特别是jdk1.6之后,swith开 ...

  9. 1 C# 将对象序列化

    public static string ObjectToXml(object obj) { using (MemoryStream memoryStream = new MemoryStream() ...

  10. Python实现读取Excel文档中的配置并下载软件包

    问题:现在遇到这样一个问题,服务器存储了很多软件包,这些包输入不同的产品,每个产品都有自己的配置,互相交叉,那么到底某一产品所有配置的软件包下载后,占用多大空间呢? 分析:从这个问题入手,了解到:软件 ...