React学习（六）—— 组件进阶

何七七KongKwan

已于 2023-08-30 17:03:19 修改

阅读量128

点赞数 1

分类专栏： React学习文章标签： react.js 学习前端

于 2023-08-30 16:46:33 首次发布

本文链接：https://blog.youkuaiyun.com/GIN0913/article/details/132579756

版权

React学习专栏收录该内容

11 篇文章

订阅专栏

学习目标：

（1）了解children属性

（2）掌握组件props的校验写法

一、children属性

1、children属性是什么

表示该组件的子节点，只要组件内部有子节点，props中就有该属性

2、示例

import React,{Component}from "react";

function ComA(props){
    const {children} =props
    return(
        <>
            <div>this is ComA </div>
            <div>{children}</div>
        </>
        
    )
}
 
class App extends Component{
    render(){
        return (
            <ComA>this is ComA children</ComA>
        )
    }
}

export default App;

PS：这里使用的插件是：react developer tools ，是在Google Chrome中的扩展程序==>访问Chrome应用商店中插入的，更多功能可阅读：React调试利器：React DevTools - 掘金 (juejin.cn)

3、children可以是什么

普通文本
普通标签元素
函数 / 对象
JSX

二、props校验

当你封装一个组件的时候，prop的数据是使用者从外部传进来的，如果你不做一些校验的话，使用者传递了错误格式的数据，导致组件内部错误，但却得不到反馈，那组件的使用效果就会大打折扣。

1、安装属性校验包

yarn add prop-types

或者

npm add prop-types

2、案例

封装一个遍历列表的组件，限定传递的数据是一个数组

import React,{Component}from "react";
// 这里导入——首字母是大写的哦
import PropTypes from 'prop-types'

function Test(props){
    const {manList} =props
    return(
        <ul>
            {manList.map(item=><li key={item.id}>{item.name}</li>)}
        </ul>
    )
    
}
// 这里是驼峰
Test.propTypes = {
    // 这里首字母大写
    manList: PropTypes.array  //限定数组类型
  }
 
class App extends Component{
    state={
        manList:[
            {id:'0',name:'BillKin'},
            {id:'1',name:'PP'},
            {id:'2',name:'Ohm'},
            {id:'3',name:'NaNon'}
        ],
    }
    render(){
        return (
            <Test manList={9}/>
        )
    }
}

export default App;

这里传递了错误的数据{9}，在控制台看到的Warning：大概就是说你提供了一个number类型的manList数据，但是组件期望的是数组类型

3、总结使用步骤

（1）通过npm 或者 yarn安装对应的包

（2）导入

（3）在组件定义之后写校验规则

4、props常见的规则

常见类型：array、bool、func、number、object、string
React元素类型：element
必填项：isRequired
特定的结构对象：shape({})

核心代码

// 常见类型
optionalFunc: PropTypes.func,
// 必填 只需要在类型后面串联一个isRequired
requiredFunc: PropTypes.func.isRequired,
// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({
	color: PropTypes.string,
	fontSize: PropTypes.number
})

5、props校验默认值

（1）函数组件：

直接设置函数的参数为默认值：function Test( { manList=[{id:'0', name:'BillKin'}] } ){}

代码示例如下：效果是渲染出一个列表项：BillKin

import React,{Component}from "react";
// 首字母是大写的哦
import PropTypes from 'prop-types'

function Test(  { manList=[{id:'0', name:'BillKin'}] }  ){
    return(
        <ul>
            {manList.map(item=><li key={item.id}>{item.name}</li>)}
        </ul>
    )
}

Test.propTypes = {
    manList: PropTypes.array  //限定数组类型
  }
 
class App extends Component{
    state={
        manList:[
            {id:'0',name:'BillKin'},
            {id:'1',name:'PP'},
            {id:'2',name:'Ohm'},
            {id:'3',name:'NaNon'}
        ]
    }
    render(){
        return (
            <Test/>
        )
    }
}

export default App;

（2）类组件

使用类静态属性声明默认值，static defaultProps = {}；
也可以在组件之后写：组件名.defaultProps = { }

代码示例如下：效果是渲染出一个列表项：BillKin

import React,{Component}from "react";

class Test extends Component{
    static defaultProps={
        manList:[{id:"0",name:'BillKin'}]
    }
    render(){
        return(
            <ul>
                {this.props.manList.map(item=><li key={item.id}>{item.name}</li>)}
            </ul>
        )
    } 
}

// Test.defaultProps = {
//     manList: [{id:"0",name:'BillKin'}]
//   }
 
class App extends Component{
    state={
        manList:[
            {id:'0',name:'BillKin'},
            {id:'1',name:'PP'},
            {id:'2',name:'Ohm'},
            {id:'3',name:'NaNon'}
        ]
    }
    render(){
        return (
            <Test/>
        )
    }
}

export default App;