React中如何根据条件调整复用组件内JSX渲染顺序并优化重复代码？

嘿，这个问题刚接触React的时候真的很常见——一不小心就写出重复的大段JSX，不过咱们可以通过提取公共逻辑+条件组合顺序的方式优雅解决！

核心思路 #

你当前的代码里，renderIconToLeft和renderIconToRight只有SVG和操作栏的顺序不同，其余判断逻辑完全一致。所以我们只需要把重复的部分单独提取成变量，再根据iconToLeft的布尔值调整它们的渲染顺序即可，不用写两套几乎一样的代码。

优化后的完整代码 #

首先修改复用组件ReusableComponent：

const ReusableComponent = ({ hideIcon, renderActions, iconToLeft = true }) => {
  // 1. 提取图标元素（单独抽离，逻辑只写一次）
  const iconElement = !hideIcon && <svg />;

  // 2. 提取操作栏/选择器元素（这部分是原来重复最多的核心逻辑）
  const actionsElement = renderActions ? (
    <div>{renderActions}</div>
  ) : output.length > 1 && selectPlacement === 'top' ? (
    <Select />
  ) : null;

  // 3. 根据iconToLeft控制渲染顺序
  return (
    <>
      {iconToLeft ? iconElement : actionsElement}
      {iconToLeft ? actionsElement : iconElement}
    </>
  );
};

然后Component1和Component2的使用方式完全不变（iconToLeft默认值为true，所以Component1不需要额外传参）：

// Component1 保持原有逻辑，图标在左
const Component1 = () => { 
  const renderActions = <button> Cancel </button>; 
  return <ReusableComponent renderActions={renderActions} />; 
};

// Component2 传iconToLeft={false}，图标在右
const Component2 = () => { 
  const renderActions = <button> Edit </button>; 
  return <ReusableComponent renderActions={renderActions} iconToLeft={false} />; 
};

为什么这么优化？ #

1. 消除重复代码：原来重复的操作栏/选择器判断逻辑现在只写一次，以后修改条件或样式时，只需要改一处即可，避免了“改了A忘了改B”的问题
2. 逻辑清晰易懂：通过简单的三元运算符控制顺序，比两大段重复的JSX更容易阅读和维护
3. 兼容原有代码：给iconToLeft设置了默认值true，原来的Component1不需要做任何修改，依然保持原有渲染顺序，符合开闭原则

进阶小技巧（可选） #

如果以后需要调整顺序的元素变多，可以用数组来组织元素，灵活性更强：

const ReusableComponent = ({ hideIcon, renderActions, iconToLeft = true }) => {
  const iconElement = !hideIcon && <svg />;
  const actionsElement = renderActions ? (
    <div>{renderActions}</div>
  ) : output.length > 1 && selectPlacement === 'top' ? (
    <Select />
  ) : null;

  // 用数组收集要渲染的元素，根据条件调整顺序
  const renderElements = [];
  if (iconToLeft) {
    iconElement && renderElements.push(iconElement);
    actionsElement && renderElements.push(actionsElement);
  } else {
    actionsElement && renderElements.push(actionsElement);
    iconElement && renderElements.push(iconElement);
  }

  return <>{renderElements}</>;
};

这种方式在元素数量较多时更易扩展，不过当前场景下用三元运算符已经足够简洁啦～

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