React通用Sample组件代码冗余，如何进行重构优化？

你的Sample组件存在重复的Button JSX结构与公共属性，可通过提取公共配置、集中处理差异逻辑的方式重构，以下是两种可行方案：

方案一：提取公共属性+合并差异化配置 #

这种方式逻辑清晰，适合差异点较多的场景，便于后续维护：

import { Button } from '@mui/material';
import { MdMoreVert, MdAdd } from 'react-icons';

export default function Sample({ isConfig }) {
  // 提取所有Button的公共属性
  const baseButtonProps = {
    className: 'xyz'
  };

  // 根据isConfig生成差异化的配置项
  const dynamicProps = isConfig 
    ? {
        variant: 'basic',
        children: <MdMoreVert size={20} />
      }
    : {
        variant: 'outline',
        size: 'medium', // 修正原代码拼写错误：meduim → medium
        endIcon: <MdMoreVert size={16} />,
        children: <MdAdd size={16} />
      };

  // 合并公共属性与差异化属性
  const buttonProps = { ...baseButtonProps, ...dynamicProps };

  return <Button {...buttonProps} />;
}

方案二：内联条件判断（紧凑写法） #

如果组件差异点较少，也可以直接在Button的props中使用三元表达式，代码更简洁：

import { Button } from '@mui/material';
import { MdMoreVert, MdAdd } from 'react-icons';

export default function Sample({ isConfig }) {
  return (
    <Button
      className="xyz"
      variant={isConfig ? 'basic' : 'outline'}
      size={isConfig ? undefined : 'medium'}
      endIcon={isConfig ? undefined : <MdMoreVert size={16} />}
    >
      {isConfig ? <MdMoreVert size={20} /> : <MdAdd size={16} />}
    </Button>
  );
}

重构说明 #

1. 消除重复的Button JSX结构，仅保留一份渲染逻辑
2. 提取公共属性className="xyz"，避免重复书写
3. 修正原代码中的拼写错误meduim为medium
4. 移除原代码中多余的重复判断props.isConfig && props.isConfig

测试代码保持不变：

<Sample isConfig/>
<Sample/>

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