当前位置:   article > 正文

React父子组件传值默认值,传值类型

React父子组件传值默认值,传值类型

1.传值默认值

defaultProps 父组件调用子组件不传值,则可以在子组件中defaultProps设置默认值

父组件调用时未传值

  1. return (
  2. <div>
  3. <Son num='123'></Son>
  4. </div>
  5. );

子件可以通过defaultProps设置默认值

  1. Son.defaultProps={
  2. t:'biaoshi66'
  3. }
  1. <div>
  2. <h2>{this.props.t}</h2>
  3. </div>

2.判断传值类型

子件通过PropTypes定义父组件给子组件传值的类型

  1. import PropTypes from "prop-types";
  2. Son.propTypes={
  3. num: PropTypes.number
  4. }
  5. //注意大小写

以上要求父组件传值的num需要是数字类型,若传值为其他类型则控制台会提示

子组件代码

  1. import React,{Component} from "react";
  2. import PropTypes from "prop-types";
  3. class Son extends Component {
  4. constructor(props){
  5. super(props);
  6. this.state={
  7. }
  8. }
  9. render() {
  10. return (
  11. <div>
  12. <h2>{this.props.t}</h2>
  13. <h2>{this.props.num}</h2>
  14. </div>
  15. );
  16. }
  17. }
  18. //通过PropTypes定义父组件给子组件传值的类型
  19. Son.propTypes={
  20. num: PropTypes.number
  21. }
  22. Son.defaultProps={
  23. t:'biaoshi66'
  24. }
  25. //defaultProps 父组件调用子组件不传值,则可以在子组件中defaultProps设置默认值
  26. export default Son;

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/63417
推荐阅读
相关标签
  

闽ICP备14008679号