赞
踩
defaultProps 父组件调用子组件不传值,则可以在子组件中defaultProps设置默认值
父组件调用时未传值
- return (
- <div>
- <Son num='123'></Son>
- </div>
- );
子件可以通过defaultProps设置默认值
- Son.defaultProps={
- t:'biaoshi66'
- }
- <div>
- <h2>{this.props.t}</h2>
- </div>
子件通过PropTypes定义父组件给子组件传值的类型
- import PropTypes from "prop-types";
-
- Son.propTypes={
- num: PropTypes.number
- }
- //注意大小写
以上要求父组件传值的num需要是数字类型,若传值为其他类型则控制台会提示
子组件代码
- import React,{Component} from "react";
- import PropTypes from "prop-types";
-
- class Son extends Component {
- constructor(props){
- super(props);
- this.state={
- }
- }
-
- render() {
- return (
- <div>
- <h2>{this.props.t}</h2>
- <h2>{this.props.num}</h2>
- </div>
-
- );
- }
- }
-
- //通过PropTypes定义父组件给子组件传值的类型
- Son.propTypes={
- num: PropTypes.number
- }
-
- Son.defaultProps={
- t:'biaoshi66'
- }
- //defaultProps 父组件调用子组件不传值,则可以在子组件中defaultProps设置默认值
-
- export default Son;
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。