父传子-类组件和函数组件

 import React, { Component } from 'react'

 

 class ChildCpn extends Component{

 

   render(){ 

    //  console.log(this.props);  // {name: "Eric", age: "28"}

    let {name,age} = this.props;

      return (

        <h2>子组件展示数据: {name}-{age}</h2> 

      )

   } 

 }

   

 export default class App extends Component {  

   render() { 

     return (

       <div> 

          <ChildCpn name="Eric" age="28"/>

          <ChildCpn name="kebe" age="40"/>

       </div>

     )

   } 

 }

 -----------------------------------

 import React, { Component } from 'react'

 

 function ChildCpn(props){ 

      // console.log(props);  // {name: "Eric", age: "28"} 

    let {name,age} = props;

    return (

      <h2>子组件展示数据: {name}-{age}</h2> 

    ) 

 }

   

 export default class App extends Component {  

   render() { 

     return (

       <div> 

          <ChildCpn name="Eric" age="28"/>

          <ChildCpn name="ker" age="45"/>

       </div>

     )

   } 

 }