普通的组件
大部分的组件内容都很可能会包含着标题,内容等,大部分的网页也会保留这种设计,这样的设计很可能会出现不少重复的代码,而为组件添加一个父容器,便可以很好的解决这个问题
render() {
return (
<div>
<header><h1>About</h1></header>
<main>Something balabala</main>
</div>
)
}
父容器的设计
通过props属性获取标题和主要内容等
render() {
const { title, children } = this.props
return (
<div>
<header><h1>{title}</h1></header>
<main>{children}</main>
</div>
)
}
组合
这时候只需要用父容器将组件包裹起来便可以通过react的数据流通获取一些必要的属性(其中this.props.children是获取组件所有子节点)
render () {
const {userList} = this.state
return (
<HomeLayout title="About">
Something balabala
</HomeLayout>
)
}
