1.16 父组件传值给子组件

最新推荐文章于 2024-07-23 14:29:05 发布

陌上浮屠

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量393

点赞数

分类专栏： react全家桶

本文链接：https://blog.csdn.net/weixin_38788947/article/details/79562367

版权

react全家桶专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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'))