React 笔记 父子组件传值 | 父组件调用子组件数据 | defaultProps | propsType合法性验证

1.通过props实现父组件像子组件传值 、方法、甚至整个父组件

传递整个父组件则   [变量名]={this}

import Header from "./Header"
render(){
    return(
     <Header msg={"我是props传递的数据"}/>
    )
}

import React,{Component} from "react";


class Header extends Component {
    constructor(props){
        super(props)
        this.state={
            
        }
    }
    render() {
        return (
            <div>
                {this.props.msg}
            </div>
        )
    }
}

export default Header;

2.子组件向父组件传值 

将父组件传给子组件  然后在子组件中调用父组件的方法并.bind(this,[传递数据])

父组件

import React,{Component} from "react";
import Header from "./Header"

class Home extends Component {
    constructor(props){
        super(props)
        this.state={
            
        }
    }
    getChildData=(data)=>{
        alert(data)
    }
    render() {
        return (
            <div>
                <Header home={this} />
            </div>
        )
    }
}

export default Header;

子组件中

import React,{Component} from "react";


class Home extends Component {
    constructor(props){
        super(props)
        this.state={
            
        }
    }

    render() {
        return (
            <div>
<button onClick={this.props.home.getChildData.bind(this,"我是向父组件传递的数据")}>子组件向父组件传值</button>
            </div>
        )
    }
}

export default Header;

上面两种都是 子组件主动给父组件传值  或者父组件主动给子组件传值

3 父组件主动调用子组件数据  通过ref  在父组件中即可主动获取子组件

import React,{Component} from "react";
import Header from "./Header"

class Home extends Component {
    constructor(props){
        super(props)
        this.state={
            
        }
    }
    getChildData=()=>{
     alert(this.refs.footer.state.msg)
    }
    render() {
        return (
            <div>
                <Header ref="header" />
                <button>获取子组件数据</button>
            </div>
        )
    }
}

export default Header;

4 默认props  如果你不给props传值  那么设置一个props默认值

class Home extends Component {
    constructor(props){
        super(props)
        this.state={
            
        }
}
    render() {
        return (
            <div>
            </div>
        )
    }
}

Home.defaultProps={
title:"默认title",
data:"默认data"
}

这样  如果没有设置title或者data  你也可以正常使用props.title/data

5 props类型合法性验证

引入prop-types 无需下载

import propsTypes from "prop-types"


class Home extends Component {
    constructor(props){
        super(props)
        this.state={
            
        }
}
    render() {
        return (
            <div>
            </div>
        )
    }
}


Home.propsTypes={
title:propsTypes.string
}

这样title就必须是string类型了 否则会警告