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

一.Children属性

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

其中children中可以传递

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

传递文本

1.  
   import React from 'react'
2.  
   function Lister({children}){
3.  
   return <div>这是一个组件{children}</div>
4.  
   }
5.  
   class App extends React.Component{
6.  
    
7.  
   render() {
8.  
   return(
9.  
   <Lister>this is tal</Lister>
10.  
    )
11.  
    }
12.  
    }
13.  
    export default App

这时候就有了children属性

 传递函数

1.  
   import React from 'react'
2.  
   function Lister({children}){
3.  
   // 使用
4.  
   children()
5.  
   return <div>这是一个组件</div>
6.  
   }
7.  
   class App extends React.Component{
8.  
    
9.  
   render() {
10.  
    return(
11.  
    // <Lister>this is tal</Lister>
12.  
    // 传递函数
13.  
    <div>
14.  
    <Lister>
15.  
    {()=>console.log('123') }
16.  
    </Lister>
17.  
    </div>
18.  
    )
19.  
    }
20.  
    }
21.  
    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

1.  
   import React from 'react'
2.  
   import PropsType from 'prop-types'
3.  
   function Test({list}){
4.  
   return(
5.  
   <div>{list.map(item=>{return <p>{item}</p>})}</div>
6.  
   )
7.  
   }
8.  
   Test.propsType={
9.  
   list:PropsType.array
10.  
    }
11.  
    class App extends React.Component{
12.  
     
13.  
    render() {
14.  
    return(
15.  
    <Test list={1}></Test>
16.  
    )
17.  
    }
18.  
    }
19.  
    export default App

三.组件校验——默认值

1，函数组件默认值

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

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

 当传值时，会覆盖默认值

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

1.  
   import React from 'react'
2.  
   function Add({pas=12}){
3.  
   return <p>{pas}</p>
4.  
   }
5.  
   // Add.defaultProps={
6.  
   // pas:13
7.  
   // }
8.  
   class App extends React.Component{
9.  
   render() {
10.  
    return(
11.  
    <Add ></Add>
12.  
    )
13.  
    }
14.  
    }
15.  
    export default App

四，类组件的默认值

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

1.  
   import React from 'react'
2.  
   class Add extends React.Component{
3.  
   static defaultProps={
4.  
   pas:12
5.  
   }
6.  
   render(){
7.  
   return<div>{this.props.pas}</div>
8.  
   }
9.  
   }
10.  
    // Add.defaultProps={
11.  
    // pas:13
12.  
    // }
13.  
    class App extends React.Component{
14.  
    render() {
15.  
    return(
16.  
    <Add ></Add>
17.  
    )
18.  
    }
19.  
    }
20.  
    export default App

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

这篇好文章是转载于：学新通技术网