React 父子组件传值,defaultProps,PropTypes

1.父子向子组件传值，可以传值，也可以传方法，也可以传整个组件this

<Child title={this.state.title}/> // this.state.title是父级的state数据,传入属性的方式传值给子组件

2.子组件获取值

class Child extends Component{ constructor(props){ super(props) } render(){ return( <div>{this.props.title}</div> ) } } // this.props可以获取父级传过来的属性

3.子组件向父组件传值，是通过父组件属性传过来的方法的参数进行传值

//父组件 <Child title={this.state.title} callback={this.getChildMsg}/> getChildMsg=(msg)=>{ console.log(this) console.log(`子组件的数据${msg}`) } //getChildMsg是父组件的方法，传给子组件回调 //子组件 <button onClick={this.props.callback.bind(this,this.state.msg)}>传值给父级</button> //通过props获取传过来的方法，进行参数传值给父级

4.父组件调用子组件的实例

<Child ref="cd" title={this.state.title} callback={this.getChildMsg}/> // 通过ref进行获取 getChild=()=>{ console.log(this.refs.cd) //获取子组件的实例 this.refs[refName] console.log(this.refs.state) }

5.设置组件的默认值

class Child extends Component{ constructor(props){ super(props); console.log(this.props) this.state={ msg:"传入父级组件的数据" } } render(){ return( <div> <p>{this.props.title}</p> <p>{this.props.name}</p> <button onClick={this.props.callback.bind(this,this.state.msg)}>传值给父级</button> </div> ) } } Child.defaultProps={ title:"默认标题", name:"默认name" } // 直接设置defaultProps就行,属性没有赋值时候，就会获取默认值

6.设置属性的类型

import PropTypes from "prop-types" //引入模块 class Child extends Component{ constructor(props){ super(props); console.log(this.props) this.state={ msg:"传入父级组件的数据" } } render(){ return( <div> <p>{this.props.title}</p> <p>{this.props.name}</p> <button onClick={this.props.callback.bind(this,this.state.msg)}>传值给父级</button> </div> ) } } Child.defaultProps={ title:"默认标题", name:"默认name" } Child.propTypes={ title: PropTypes.string, //字符串 name: PropTypes.number //number类型 } //类似defaultProps的定义方式 //上面title是string类型，name是number类型，所以默认值name就会报错，因为默认值是string，不匹配