App.js

import About from ‘./About’ import Header from ‘./Header’ /** 01 针对于函数组件来说，如果想要设置默认的 props 属性值，则直接通过 *组件名称.defaultProps 来设置一个对象 02 针对于类组件来说，我们可以直接定义 *static defaultProps 来管理需要设置默认值的属性即可 * * 为什么要对 props 中的属性进行类型校验 * */ const obj = { name:‘zce’, age:40 } function App() { return ( <div> <Header/> <About/> </div> ) } export default App

函数组件 About.js

import React from ‘react’ import PropTypes from ‘prop-types’ function About({ name, age }) { return ( <div> <p>{name}</p> <p>{age}</p> </div> ) } About.defaultProps = { name:‘syy’, age:18 } //类组件和函数组件类型校验写法一样，(注意大小写)使用组件名.propTypes = {属性名1: 类型1, …} About.propTypes = { name:PropTypes.string.isRequired, age:PropTypes.number } export default About

类组件Header.js

import React, { Component } from‘react’ class Header extends Component { static defaultProps = { name:‘拉勾教育’, age:100 } render() { // 在类组件当中存在一个 props 属性，外部所传递进来的数据的都可以通过它进行访问 const { name, age } = this.props return ( <div> <p>{name}</p> <p>{age}</p> </div> ) } } export default Header