React组件（二）——进阶版 children属性组件默认值属性

一.Children属性

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

其中children中可以传递

1.普通文本 2.普通标签元素 3..函数 4.jsx

传递文本

import React from 'react'
function Lister({children}){
return <div>这是一个组件{children}</div>
}
class App extends React.Component{

  render()  {
    return(
    <Lister>this is tal</Lister>
    )
  }
}
export default App

这时候就有了children属性

 传递函数

import React from 'react'
function Lister({children}){
  // 使用
   children()
return <div>这是一个组件</div>
}
class App extends React.Component{

  render()  {
    return(
    // <Lister>this is tal</Lister>
    // 传递函数
    <div>
    <Lister>
    {()=>console.log('123') } 
    </Lister>
    </div>
    )
  }
}
export default App

传递Jsx

 如果传递多个那么children属性就是一个数组，利用map遍历展示出来

二.props类型校验

1.为什么要进行类型校验

在父子组件通讯中，若要接收到的数据是数组类型，但是传递过来的确实Number类型，这就不太合适。

2.校验步骤

1. 安装属性校验包：yarn add prop-types
2. 导入prop-types 包
3. 使用 组件名.propTypes = {} 给组件添加校验规则

3.常见的类型校验结构

1. 常见类型：array、bool、func、number、object、string
2. React元素类型：element
3. 必填项：isRequired
4. 特定的结构对象：shape({})
5. 官网文档更多阅读：https://reactjs.org/docs/typechecking-with-proptypes.html

import React from 'react'
import PropsType from 'prop-types'
function Test({list}){
  return(
    <div>{list.map(item=>{return <p>{item}</p>})}</div>
  )
}
Test.propsType={
list:PropsType.array
}
class App extends React.Component{

  render()  {
    return(
   <Test list={1}></Test>
    )
  }
}
export default App

 

三.组件校验——默认值

1，函数组件默认值

通过 defaultProps 可以给组件的props设置默认值，在未传入props的时候生效

 如下面代码，当不传数值时默认为13

 当传值时，会覆盖默认值

 还有一种设置默认值方法传参时进行设置默认值

import React from 'react'
function Add({pas=12}){
  return <p>{pas}</p>
}
// Add.defaultProps={
//   pas:13
// }
class App extends React.Component{
  render()  {
    return(
  <Add ></Add>
    )
  }
}
export default App

四，类组件的默认值

方法一：使用类静态属性声明默认值，static defaultProps = {}

import React from 'react'
class Add extends React.Component{
  static defaultProps={
    pas:12
  }
  render(){
    return<div>{this.props.pas}</div>
  }
}
// Add.defaultProps={
//   pas:13
// }
class App extends React.Component{
  render()  {
    return(
  <Add ></Add>
    )
  }
}
export default App

方法二.与函数组件中defaultProps用法相同