React的组件创建、样式写法、数据的状态和属性、属性验证prop-types
一、组件的创建
1、函数式组件（无状态组件 prueCcmponent）
import React,{Fragment} from 'react'
function Comp(){
return (
content
)
}
export default Comp
{/*接下来一般在App.js中引入即可*/}
2、类组件
import React,{Component,Fragment} from 'react'
{/*这里要解析jsx就需要引入React，从react.Component中解构出Component*/}
class Comp extends Component{
render(){
return (
{/*唯一根元素，用Fragment代替一般的div可以在结构上减少一层*/}
content
)
}
}
export default Comp
{/*接下来一般在App.js中引入即可*/}
二、四种样式写法：
1、直接在标签里面写样式，类似于行内样式
import React,{Component,Fragment} from 'react'
class Styleone extends Component{
render(){
return (
这里是第一种样式组件
)
}
}
export default Styleone
2、引入css样式文件，再在标签上写css样式文件里面的类名，需注意，这里的class是原生，所以要写成className。如果引的是scss或者stylus文件，需要配置webpack文件来编译。
import React,{Component,Fragment} from 'react'
import './style.css'
class Styletwo extends Component{
render(){
return (
这里是第二种样式组件
)
}
}
export default Styletwo
3、不同的条件，添加不同的样式，使用npmjs官网里面的classname的包文件
安装cnpm i classname -S
{/*这里也要引入对应的样式css文件，样式文件中有许多类名，通过classname函数来选择谁被添加*/}
import React,{Component,Fragment} from 'react'
import classname from 'classname'
import './style.css'
class Stylethree extends Component{
render(){
return (
这里是第三种样式组件
)
}
}
export default Stylethree
4、利用styled-components这个第三包，需要安装，React认为一切皆组件，所以这里要写样式组件，再引入(推荐)，最后解析到页面，类名是由这个包文件自动分配的，我们再也不用担心类名重复问题
安装：cnpm i styled-components -D
import React,{Component,Fragment} from 'react'
import styled from 'styled-components'
{/*styled后面加的是什么标签，最后这个Container组件就会被解析为什么，且具有模板字符串里面的样式*/}
const Container = styled.div`
width:100px;
height:100px;
background-color:lime;
`
class Stylefour extends Component{
render(){
return (
这里是第四种样式组件
)
}
}
export default Stylefour
感觉比较强大的是，这种样式组件还可以嵌套，并写入内容、标签等，不用担心像一般的组件一样，即组合组件，里面的不在父组件里面写{this.props.children}会被覆盖的问题
import React,{Component,Fragment} from 'react'
import styled from 'styled-components'
{/*styled后面加的是什么标签，最后这个Container组件就会被解析为什么，且具有模板字符串里面的样式*/}
const Container = styled.div`
width:300px;
height:300px;
background-color:lime;
`
const Warpper = styled.section`
width:200px;
height:200px;
background-color:red;
div{
color:yellow;
font-size:20px;
width:100px;
height:100px;
ul{
li{
list-style-type:none;
}
}
}
`
class Stylefour extends Component{
render(){
return (
这里是第四种样式组件
- 任务一
- 任务二
- 任务三
{/*这个组件会被解析为一个div，且具有上面写的样式*/}
)
}
}
export default Stylefour
三、数据之属性和状态
1、属性：
Props 属性: 是描述组件的性质、特征的，组件自身不会轻易改变的
-
外部传入: 在组件的标签形式上以属性的形式绑定即可
比如：在父组件的模板中，子组件的身上写一个name="lzc"
在子组件里面写：{this.props.name}即可展示这个属性数据
-
内部设置
在组件自己的内部（如类组件里面）用关键字：
static defaultProps = {
info:'爱情来的太快，就像龙卷风',
}
这个属性也会在组件的props上面，可以用{this.props.info}来展示
2、状态：组件自己的状态，只能自己修改，下面两种形式只能选择用一种
- 以实例属性的形式
如：在类组件中写
state = {
info:'哈哈哈',
}
组件访问的话，直接用 {this.state.info} 即可
- 用constructor构造器的形式(推荐使用) 既有属性又有状态，为React16版本的重大更新
如：在类组件中写,这里props可以不写，默认是props
constructor (props) {
super(props)
this.state = {
name : 'lzc',
info : '乐不思蜀',
}
}
通过super继承了绑定在当前组件上的属性，可以用props访问
而组件的状态用state来访问{this.state.name}
即：构造器形式的里面既有属性，又有状态
在15版本以前
用getDefaultProps(){} 钩子函数来管理属性
用getIntalState(){} 钩子函数来管理状态
现在合并为constructor(){}
四、属性验证：不符合，会警告(这个现在用的不多，因为现在多用React+Ts，而Ts是带检测属性的)
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Hello extends Component {
static defaultProps = { // 内部设置属性
info: 1000
}
render () {
console.log( this )
return (
外部传来了一个属性 { this.props.name }
内部设置的属性 { this.props.info }
组件的内容 { this.props.children }
)
}
}
Hello.propTypes = {
info: PropTypes.number
}
export default Hello