如何在React中简化根据状态添加组件额外props的冗余代码

先说结论：递归在这个场景完全没用 #

递归是靠函数自调用处理同结构、可分层迭代的重复逻辑，你现在是单层级的同组件分支判断，根本没有需要自调用拆解的逻辑链路，硬套递归只会多绕一层调用栈、增加调试成本，属于完全没必要的过度设计，根本解决不了重复代码的问题。 #

最实用的简化思路：抽公共props，动态传差异值 #

你两段渲染逻辑90%的内容是重复的，唯一变量就是iconRight属性，根本不需要写两个独立的<Input>标签。只要把公共属性抽出来，只对差异部分做动态判断就行，写法非常灵活：

基础写法：三元表达式直接赋值 #

renderInput = () => {
  // 把所有两个分支完全一样的props抽成公共配置
  const commonProps = {
    autoComplete: "off",
    id: "unique-id-2",
    "aria-autocomplete": "both",
  };

  return (
    <Input
      {...commonProps}
      // 非loading时传undefined，和原来不写iconRight的效果完全一致
      iconRight={isLoading ? <Spinner /> : undefined}
    />
  );
};

这种写法最直观，后续如果要给Input加公共属性，只需要在commonProps里改一次，再也不用担心两个分支不同步漏改。

更贴合原行为的写法：条件扩展属性 #

如果碰到对props校验比较严格的第三方组件——比如显式传iconRight={undefined}会触发类型警告，但完全不传这个属性就没问题——可以改用条件对象扩展的写法，保证非loading状态下根本不往Input里传iconRight：

renderInput = () => {
  return (
    <Input
      autoComplete="off"
      id="unique-id-2"
      aria-autocomplete="both"
      // isLoading为false时，整个表达式结果是false，扩展false不会带入任何prop
      {...(isLoading && { iconRight: <Spinner /> })}
    />
  );
};

方案的适配性 #

这套思路不是只能用在两个分支的场景，只要是同个组件的多分支渲染，不管是2个还是5个分支，只要差异属性不多，都可以靠抽公共props+动态传值的方式消掉重复代码，比堆一长串if/else返回一堆结构雷同的组件要可维护得多。

内容的提问来源于stack exchange，提问作者merry-go-round