类组件和函数组件

App.js

import About from ‘./About’ import Header from ‘./Header’ /** * 01 在组件身上添加属性然后传递数据 * 02 将数据统一管理，然后利用 … 操作直接传递给相应的组件 * * a 函数组件：在函数组件内可以接上到外部的数据，内部直接访问即可{ name:xxx, age:xxxx } * b 类组件： 在类组件的内部存在一个 props 属性(只读)，外部传递的数据都放在这里保存，我们可以直接进行使用 */ const obj = { name:‘zce’, age:40 } function App() { return( <div> {/
/} <Header{…obj}/> {/ /} <About{…obj}/> </div> ) } export default App

类组件Header.js

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

函数组件About.js

import React from ‘react’ function About ({name, age}) { return ( <div> <p>{name}</p> <p>{age}</p> </div> ) } export default About