1-跨组件通信-props

 

 

import React, { Component } from 'react'

// props  从上向下一层一层传递

function ProfileHeader(props){

    console.log(props);

    return ( 

        <div>

            <h2>用户昵称: {props.nickname}</h2>

            <h2>用户等级: {props.level}</h2>

        </div>

    )

}

function Profile(props){

    return (

        <div>

            {/* <ProfileHeader nickname={props.nickname} level={props.level}/> */} 

            <ProfileHeader  {...props}/>

            <ul>

                <li>设置1</li>

                <li>设置2</li>

                <li>设置3</li>

            </ul>

        </div>

    )

}

export default class App extends Component {

    constructor(props){

        super(props);

        this.state = {

            nickname:'Eric2',

            level:98

        }

    }

    render() {

        // let {nickname,level} = this.state;

        return (

            <div>

                {/* <Profile nickname={nickname} level={level}/> */}

                <Profile {...this.state}/>

            </div>

        )

    }

}