1.16 父组件传值给子组件

react中需要将数据一层层向下传递，数据是单向数据流

import React,{Component} from 'react'
import ReactDOM from 'react-dom'
import 'bootstrap/dist/css/bootstrap.css'
//什么是符合组件：将多个组件进行组合，例如调用2次Counter组件；
//结构非常复杂时，可以把组件分离开；
//复合组件有 父子关系（父组件数据传递给子组件）
class Panel extends Component{
    render(){
        let {header,body}=this.props
        return (
            <div className='container'>
                <div className={'panel-defaule panel'}>
                    <Header header={header}></Header>
                    <Panelbody body={body}></Panelbody>
                </div>
            </div>
        )
    }
}
class Header extends Component{
    render(){
        return (
            <div className='panel-heading'>{this.props.header}</div>
        )
    }
}
class Panelbody extends Component{
    render(){
        return (
            <div className='panel-body'>{this.props.body}</div>
        )
    }
}
let data={
    header:'我非常棒',
    body:'我长得帅',
}
ReactDOM.render(<Panel {...data}></Panel> ,document.getElementById('root'))