React搭建整体页面

React组件布局实践

最新推荐文章于 2024-06-19 18:35:01 发布

weixin_34375233

最新推荐文章于 2024-06-19 18:35:01 发布

阅读量583

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5bbb3eb75188255c7566e4fc

本文介绍了一个基于React的组件布局实现，通过自定义Layout组件来构建包含头部、导航和主体内容的页面结构。此布局组件可以被其他React组件复用，以保持页面设计的一致性。

1. 搭建结构如下图的页面

2. 具体实现

class Layout extends React.Component {
    render() {
        return (
            <header class="header">头部</header>
            <div class="main-wrap">
                <nav class="nav">导航</nav>
                <div class="main">{this.props.children}</div>
            </div>
        )
        
    }
}
复制代码

使用该组件

import Layout from './Layoout';
class UserInfo extends from React.Component {
    render() {
        return (
            <Layout>
                <div>
                    主体内容
                    ...
                </div>
            </Layout>
        )
    }
}
复制代码