React.js不新增多组件实现页面不同背景色区域布局

完全可以不新增多个独立组件实现不同背景色的分区布局，React没有强制要求必须把每个视觉区块拆成单独组件。

不拆分组件的实现方法 #

你直接在Navbar和Footer之间插入普通的div容器作为分区载体，给每个容器设置独立的类名，在CSS里给对应类名配置不同的背景色、内边距等样式即可，不需要额外封装组件，示例代码如下：

function App() {
  return (
    <div className="App">
      <Navbar />
      {/* 第一个背景色区域 */}
      <div className="area-one">
        {/* 区域一的所有内容直接写在这里 */}
        <h2>第一区块标题</h2>
        <p>第一区块的正文、交互元素都可以直接放在这个div里</p>
      </div>
      {/* 第二个背景色区域 */}
      <div className="area-two">
        <h2>第二区块标题</h2>
        <p>第二区块内容</p>
      </div>
      {/* 第三个背景色区域 */}
      <div className="area-three">
        <h2>第三区块标题</h2>
        <p>第三区块内容</p>
      </div>
      <Footer />
    </div>
  );
}

对应的CSS样式参考：

/* 给三个区域设置不同背景色，通栏宽度直接撑满父容器即可 */
.area-one {
  background-color: #e0f2fe;
  padding: 64px 16px;
}
.area-two {
  background-color: #f3f4f6;
  padding: 64px 16px;
}
.area-three {
  background-color: #ffffff;
  padding: 64px 16px;
}

关于组件拆分的规范说明 #

你之前想到的把每个区域拆成独立组件的写法本身没有问题，不是“不够优”的方案，只是适用场景不同，你可以按照下面的标准判断要不要拆分：

• 如果每个区块内容很少、没有独立的交互逻辑和状态，完全不需要拆分，直接写div是效率最高的方式，过度拆分反而会增加代码跳转的维护成本
• 如果单个区块的代码量超过百行、有独立的状态/逻辑（比如数据请求、表单提交、轮播交互）、或者后续需要在其他页面复用，再拆成独立组件会更方便维护
• 组件拆分没有绝对的对错标准，核心目的是降低代码的理解和维护成本，新手阶段不用为了“符合规范”强行拆分，等你写代码时发现某块内容太长找起来麻烦，或者同一块内容要复制粘贴用在别的地方时，再拆成组件就可以。

实际项目里大部分简单的静态展示区块，都是直接写容器标签不拆组件的，不用有心理负担。

内容的提问来源于stack exchange，提问作者Chocode