普通的组件

大部分的组件内容都很可能会包含着标题,内容等,大部分的网页也会保留这种设计,这样的设计很可能会出现不少重复的代码,而为组件添加一个父容器,便可以很好的解决这个问题

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