React父子组件传值props && PropTypes &&defaultProps_react 函数组件父组件未传值时设置子组件默认值

父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件

父子组件（react父子组件通信）：

父组件给子组件传值
1.在调用子组件的时候定义一个属性，

2.子组件里面 this.props.msg
父组件不仅能和子组件传值，还可以给子组件传方法，以及把整个父组件传给子组件。

父组件主动获取子组件的数据

1. 调用子组件时指定ref的值，

<Header ref='header'></Header>
1

2.通过this.refs.header 获取整个子组件实例

父子组件传值

引入者为父组件，被引入者为子组件。

1.父组件

import React from 'react';
import Header from './Header'

class News extends React.Component{
    constructor(props){
        super(props)   // 父子组件传值，|| 固定写法
        
        // 定义数据
        this.state ={
            title:'新闻组件',     
        }
    }
    render(){
        return(
            <div>

              <Header title={this.state.title}/> 

            </div>
        )
    }
}

export default News;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

子组件

import React, {Component} from 'react'

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg:'这是一个头部组件!'
          };
    }
    render() {
        return (
            <div>
                <p>{this.props.title}</p>
            </div>
        );
    }
}
export default Header;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

进阶组件获取方法，获取整个组件

父组件

import React from 'react';
import Header from './Header'

class News extends React.Component{
    constructor(props){
        super(props)   // 父子组件传值，|| 固定写法
        
        // 定义数据
        this.state ={
            title:'新闻组件',
          
        }
       
    }
    run =()=>{
        alert('父组件的方法')
    }
    getData =()=>{
        alert('父组件的getData方法')
    }
    getChden =(res)=>{
        alert(res)
       this.setState({
           title:res
       })
    }
    render(){
        return(
            <div>
                    {/* 
                    title={this.state.title}     // 传值
                    run={this.run}               // 传方法
                    news={this}                  // 传整个组件
                */}
              <Header title={this.state.title} run={this.run} news={this}/> 

            </div>
        )
    }
}
export default News;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

子组件

import React, {Component} from 'react'

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg:'这是一个头部组件!'
          };
    }
    render() {
        return (
            <div>
                {/* 接收值 */}
                <p>{this.props.title}</p>  
                {/* 接收方法 */}
                <button onClick={this.props.run}>父组件传过来的方法</button>
                {/* 接收整个组件调运其中的方法 */}
                <button onClick={this.props.news.getData}>父组件getData方法</button>
                 {/* 子组件想父组件传值 */}
                <button onClick={this.props.news.getChden.bind(this,'向父组件传值')}>向父组件传值getChden</button>
            </div>
        );
    }
}

export default Header;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.
3.如果父组件没有给子组件传值，只是挂载，我们可以在子组件里使用默认值

Header.defaultProps={ 
 title:'标题'   // 没传值默认显示标题
}
1
2
3

4. 定义传值类型

propTypes

// 不需要安装，本身自带
import PropTypes from ‘prop-types’

<Header   num=20 />
Header.propTypes={
	num:PropTypes.number //  指定数字类型
}
1
2
3
4
5
6
7