如何让React项目中阅读与编辑模式的行高、段落间距保持一致

问题根因 #

1. 你没有统一设置<p>标签的默认样式，只读组件的<p>仅包含纯文本，编辑组件的<p>包含label和输入框，输入框默认自带内边距、外边距，导致单个<p>的高度更高，相邻<p>的间距也不一致。
2. 没有设置label的统一宽度，文字部分也会出现不对齐的问题。

修复方法 #

1. 新增全局统一样式 #

在你现有的ProfileStyled styled组件模板中，添加以下样式规则，原有样式无需修改：

const ProfileStyled = styled.div`
  /* 原有样式保持不变，新增以下内容 */
  * {
    box-sizing: border-box;
  }
  /* 统一所有p标签的间距、行高和布局 */
  p {
    margin: 10px 0; /* 可自定义数值，保证所有p上下间距一致即可 */
    line-height: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px; /* 统一字体大小 */
  }
  /* 统一label宽度，保证文字对齐 */
  p label {
    width: 75px; /* 可根据实际视觉效果调整宽度 */
  }
  /* 统一输入框样式，和纯文本高度匹配 */
  p input {
    height: 30px;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: inherit;
  }
`

2. 优化编辑态切换逻辑（可选，适配行内编辑需求） #

你当前同时渲染了只读和编辑两个组件，后续实现行内编辑时，建议用状态控制仅渲染其中一个，避免同时占用页面空间：
修改ParentFile.js的代码：

import { useState } from 'react'

// ... 其他原有逻辑保持不变

const [isEditing, setIsEditing] = useState(false)

return (
    <ProfileStyled>
      <h1> Profile </h1>
      <div className="profile-infos">

        <div className='row'>
          <div className='column'>
            <div className="user-infos">
              <form>
                {/* 根据状态渲染对应组件 */}
                {isEditing ? <EditableRow getData={getData} /> : <ReadOnlyRow getData={getData} />}
                <button type="button" onClick={() => setIsEditing(!isEditing)}>
                  {isEditing ? '保存修改' : '编辑资料'}
                </button>
              </form>
            </div>
          </div>
        </div>

        {/* 原有其他结构保持不变 */}
      </div>
    </ProfileStyled>
  );

修改完成后，两个组件的行高、间距就会完全对齐，切换编辑状态时不会出现页面跳动的问题。

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