目录:

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. Analyzing Polyline -- Codeforces Round #123 (Div. 2)

    题意:https://codeforc.es/problemset/problem/195/D 求折线段数. 思路: 对pos进行sort,对不同区间段加k,两个dp处理不同k>0 or k&l ...

  2. 《深入理解 Java 虚拟机》学习笔记 -- 内存区域

    <深入理解 Java 虚拟机>学习笔记 -- 内存区域 运行时数据区域 主要分为 6 部分: 程序计数器 虚拟机栈 本地方法栈 Java 堆 方法区 如图所示: 1. 程序计数器(线程私有 ...

  3. 18-Perl 错误处理

    1.Perl 错误处理程序运行过程中,总会碰到各式各样的错误,比如打开一个不存在的文件.程序运行过程中如果出现错误就会停止,我们就需要使用一些检测方法来避免错误,从而防止程序退出.Perl 提供了多中 ...

  4. 10.Bash的安装

    10.Bash的安装本节提供了在 Bash支持的不同系统上的基本安装指导.本版本支持 GNU操作系统,几乎每个 UNIX版本,以及几个非 UNIX 系统,例如 BeOS 和 Interix.还有针对 ...

  5. 国内有哪些好的JAVA社区

    转载自 https://www.zhihu.com/question/29836842#answer-13737722 并发编程网 - ifeve.com 强烈推荐 ImportNew - 专注Jav ...

  6. 基于S7协议实现与西门子PLC通信

    西门子PLC是目前工控行业市场占有额比较大的一款PLC,而且随着上位机的越来越普及, 有很多人开始考虑自己开发上位机实现与西门子PLC的通信,遇到的第一个问题就是数据通信. 其实西门子PLC提供的接口 ...

  7. Facebook团队合影

    今晚公司年会,晚上有些人不去,我晚上要带孩子,也不去,大家就说那我们中午照个合照吧.没啥子准备,大家都一副油腻的样子.除了要去party的化了妆.

  8. O035、Nova Suspend / Rescue 操作详解

    参考https://www.cnblogs.com/CloudMan6/p/5503501.html   Suspend / Resume   有时候需要长时间暂停 instance , 可以通过 S ...

  9. 4.移动端自动化测试-API讲解

    一.前置代码 1.导入driver对象    from appium import webdriver 2.声明手机驱动对象  只有声明驱动对象我们才可以让手机完成脚本的操作    driver = ...

  10. element-ui select

    1. 组合 label <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...