App.js

import About from ‘./About’ import Header from ‘./Header’ const obj = { name:‘zce’, age:40 } function App() { return ( <div> <Header> //向Header类组件中传入JSX <p>Header组中的 P标签</p> <span>Header组件中的 span标签</span> </Header> <About> //向About函数组件中传入JSX <p>About 中p标签</p> </About> </div> ) } export default App

类组件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> //children访问的是所有子元素 {this.props.children} </div> ) } } export default Header

函数组件About.js

import React from ‘react’ import PropTypes from ‘prop-types’ function About(props) { return ( <div> <p>{props.name}</p> <p>{props.age}</p> {props.children} </div> ) } About.defaultProps = { name:‘syy’, age:18 } About.propTypes = { name:PropTypes.string.isRequired, age:PropTypes.number } export default About