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

本文主要是介绍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类型了 否则会警告

这篇关于React 笔记 父子组件传值 | 父组件调用子组件数据 | defaultProps | propsType合法性验证的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---