React组件复用：复制组件VS传递props控制行为逻辑

针对你的场景，两种方案各有适用场景，核心看组件现有逻辑复杂度和后续维护需求：

优先尝试：通过props控制显示（如果逻辑改动小） #

如果只是单纯隐藏模态表单按钮，原有组件的核心逻辑（基于特定值显示元素）不需要改动，那直接加一个布尔类型的props（比如isReadOnly）最省事，不用重复写组件代码：

// 原组件示例
function MathComponent({ data, isReadOnly = false }) {
  return (
    <div className="subject-component">
      {/* 原有只读内容逻辑 */}
      <h2>Math</h2>
      <p>{data.score}</p>
      
      {/* 仅非只读状态显示表单按钮 */}
      {!isReadOnly && (
        <button onClick={() => openEditModal()}>编辑</button>
      )}
      
      {/* 模态框也根据isReadOnly控制显示 */}
      {!isReadOnly && <EditModal data={data} />}
    </div>
  );
}

// 渲染只读视图时
{subjects.map(subject => (
  <MathComponent key={subject.id} data={subject.data} isReadOnly={true} />
))}

这种方式的好处是避免代码重复，适合改动极小的场景。

考虑拆分组件：当原有逻辑已复杂时 #

如果你的四个组件本身已经有很多条件判断、状态管理逻辑，再叠加isReadOnly的判断会让代码变得臃肿（比如到处都是{!isReadOnly && ...}），后续维护容易出错，那拆分出独立的只读组件更合理。

更优的做法是抽离公共的只读内容到一个基础组件，再基于它扩展带编辑功能的组件：

// 公共只读基础组件
function SubjectBase({ subjectName, data }) {
  return (
    <div className="subject-base">
      <h2>{subjectName}</h2>
      {/* 所有科目共享的只读显示逻辑 */}
      <p>当前成绩：{data.score}</p>
      <p>备注：{data.note}</p>
    </div>
  );
}

// 带编辑的Math组件
function MathComponent({ data, onUpdate }) {
  return (
    <div className="subject-edit-wrapper">
      <SubjectBase subjectName="Math" data={data} />
      {/* Math专属的编辑按钮与模态框 */}
      <button onClick={() => openMathEditModal()}>编辑数学</button>
      <MathEditModal data={data} onSubmit={onUpdate} />
    </div>
  );
}

// 只读视图直接用基础组件
{subjects.map(subject => (
  <SubjectBase 
    key={subject.id} 
    subjectName={subject.type} 
    data={subject.data} 
  />
))}

这种拆分方式既保持了代码复用，又让每个组件职责单一，后续维护更清晰。

通用准则：何时停止传props，转而创建独立组件 #

判断的核心是组件职责是否单一和维护成本是否可控：

• 当你的组件需要接收3个及以上的开关类props（比如isReadOnly、isDisabled、showExtraInfo）来控制不同显示/交互状态时，说明这个组件承担了太多职责，应该拆分。
• 当添加新props后，组件内的条件判断嵌套变深、逻辑分支变多，导致代码可读性下降，后续改bug或加功能容易牵一发而动全身时，必须拆分。
• 如果某个状态的组件（比如只读视图）会在多个页面/场景复用，单独抽成组件比每次传props更方便。

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