React中position: fixed组件重复渲染位置重叠问题求助

问题根源在于两个FloatingButton都设置了position: fixed且right: 32px，导致它们完全重叠。下面提供几种可行的解决方案：

方法一：用固定定位容器包裹按钮（推荐） #

把两个按钮放在一个固定定位的容器中，由容器统一控制位置，按钮本身不再使用固定定位，这样可以轻松实现并排布局，还方便后续调整间距或新增按钮。

修改JSX代码： #

return (
    <div className="details">
        <Grid container spacing={3}>
            <Grid item xs={12} md={12}>
                <Header {...headerProps} />
            </Grid>
            {/* 新增固定定位容器 */}
            <div className="fixed-btn-group">
                {floatingButtonProps ? <FloatingButton {...floatingButtonProps} /> : null}
                {floatingButtonProps ? <FloatingButton {...floatingButtonProps} /> : null}
            </div>
        </Grid>
    </div>
);

修改CSS代码： #

/* 固定定位的按钮组容器 */
.fixed-btn-group {
    position: fixed;
    bottom: 32px;
    right: 32px;
    display: flex;
    gap: 16px; /* 按钮之间的间距，可按需调整 */
}

/* 修改FloatingButton的样式，移除固定定位相关属性 */
.floating-button {
    min-width: 80px;
    max-width: 80px;
    height: 80px;
    border-radius: 40px;
    /* 删掉 position: fixed、bottom、right */
    display: inline-flex;
    border-color: transparent;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: max-width 0.5s;
}

方法二：给每个按钮设置不同的偏移量 #

如果不想改动组件的固定定位逻辑，可以通过计算偏移量，给第二个按钮设置更大的right值，让它错开第一个按钮。

修改JSX代码： #

return (
    <div className="details">
        <Grid container spacing={3}>
            <Grid item xs={12} md={12}>
                <Header {...headerProps} />
            </Grid>
            <Grid container className="inner-container" justifyContent="flex-end">
                <Grid item>
                    {floatingButtonProps ? <FloatingButton {...floatingButtonProps} /> : null}
                </Grid>
                <Grid item>
                    {/* 给第二个按钮添加自定义类名 */}
                    {floatingButtonProps ? <FloatingButton {...floatingButtonProps} className="second-btn" /> : null}
                </Grid>
            </Grid>
        </Grid>
    </div>
);

添加CSS样式： #

.second-btn {
    /* 原right值 + 按钮宽度 + 间距，这里用calc计算更灵活 */
    right: calc(32px + 80px + 16px);
}

方法三：让组件支持自定义位置属性 #

修改FloatingButton组件，允许传入自定义样式属性，这样可以动态控制每个按钮的位置：

修改FloatingButton组件： #

const FloatingButton = ({ style, ...props }) => {
    return (
        <button className="floating-button" style={style} {...props}>
            {/* 按钮内部内容 */}
        </button>
    );
};

使用组件时传入位置样式： #

<Grid item>
    {floatingButtonProps ? <FloatingButton {...floatingButtonProps} style={{ right: '32px' }} /> : null}
</Grid>
<Grid item>
    {floatingButtonProps ? <FloatingButton {...floatingButtonProps} style={{ right: '128px' }} /> : null}
</Grid>

推荐使用方法一，这种方式的维护性更高，后续调整按钮数量或间距时，只需要修改容器样式即可，不需要逐个调整按钮的偏移量。

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