React中处理条件渲染与动态Props的最优方式是什么

核心优化思路 #

原有代码的重复逻辑可以全部合并，仅对差异属性onClick做条件透传即可，无需拆分两个分支渲染组件。

方案1：JSX 内条件展开属性（写法最简洁） #

{paymentType === "CASH" && (
  <OnOffButton
    type="cash"
    on={status !== "CREATED"}
    {...(status === "ACCEPTED" && {
      onClick: () => setActionBox({ type: status })
    })}
  />
)}

说明：通过对象展开语法...实现条件传参，只有当status === "ACCEPTED"时，才会将onClick属性传递给组件，否则不会传递该属性，和你原有分支逻辑效果完全一致。

方案2：提前定义事件处理函数（可读性最高） #

如果觉得JSX内嵌条件逻辑不够直观，可以把事件处理逻辑提到渲染逻辑外：

// 组件内渲染逻辑前提前定义
const cashButtonOnClick = status === "ACCEPTED" 
  ? () => setActionBox({ type: status }) 
  : undefined;

// 渲染部分
{paymentType === "CASH" && (
  <OnOffButton 
    type="cash" 
    on={status !== "CREATED"} 
    onClick={cashButtonOnClick} 
  />
)}

说明：如果OnOffButton组件对未传入的onClick有默认值处理，传入undefined和不传属性的效果完全一致，不会影响原有功能。

额外简化点 #

• 原有on属性的三元判断status === "CREATED"?false:true可以直接简化为status !== "CREATED"，二者逻辑完全等价
• 原有onClick内部的三元分支可以直接简化为取当前status值作为type，无需额外判断

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