如何在React Header中同时展示3个组件？当前组件互斥无法共存

问题成因 #

你提供的header样式存在明显的布局冲突：

• header同时设置了width: 100%和margin: 0 260px 0，相当于左右各加了260px的外边距，此时header的实际总宽度为100% + 520px，远远超出视口可视范围
• header本身是flex布局，justify-content: space-between规则会让多个子元素分别向左右两端对齐，当你新增子元素后，右侧的通知组件会被直接挤到视口外的右侧区域，所以看起来就像消失了。

解决方案 #

第一步：修复header样式冲突 #

修改root样式里的宽度规则，抵消左右边距的影响，避免内容溢出：

root: {
    "position": "fixed",
    "top": "0",
    "left": "0",
    /* 把100%改成calc计算，减去左右260px的总边距，不需要左右边距也可以直接删掉margin规则，保留width: 100%即可 */
    "width": "calc(100% - 520px)",
    "height": "6rem",
    "backgroundColor": "#8a2b06",
    "color": "white",
    "display": "flex",
    "justifyContent": "space-between",
    "alignItems": "center",
    "padding": "0 10%",
    "boxShadow": "0 2px 8px rgba(0, 0, 0, 0.25)",
    "zIndex": "10",
    "margin": "0px 260px 0",
}

第二步：调整组件结构实现布局要求 #

要实现两个余额组件居中、通知在右侧的效果，需要把两个余额组件放在同一个中间容器内，header的直接子节点只保留三个部分，新增余额容器的样式：

balanceWrapper: {
  display: "flex",
  gap: "2rem", /* 两个余额之间的间距可自行调整 */
}

修改组件代码：

return (
  <Fragment>
    <header className={classes.root}>
      {/* 左侧如果没有内容可以留空占位，也可以放置logo等左侧元素 */}
      <div />
      {/* 中间容器装两个余额组件 */}
      <div className={classes.balanceWrapper}>
        <div>现金余额：123</div>
        <div>资产余额：123</div>
      </div>
      {/* 右侧通知组件 */}
      <HeaderNotification />
    </header>
  </Fragment>
);

flex的justify-content: space-between规则会自动把空div推到最左、余额容器推到中间、通知组件推到最右，完全符合布局要求。

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