React组件与UI系统解耦：寻求更贴合React风格的实现方案

1. 基于React Context的UI Provider模式 #

这是最贴合React设计理念的解耦方案，通过Context将UI库组件实例注入到应用中，业务组件仅依赖抽象接口，不直接绑定具体UI库。

• 定义统一组件接口与Props：先梳理所有需要复用的组件类型（如Button、Input、Card），创建类型文件统一约束Props：

// types/ui.ts
export interface UIComponents {
  Button: React.ComponentType<ButtonProps>;
  Input: React.ComponentType<InputProps>;
  // 按需添加其他组件
}

// 统一Props示例，兼顾各UI库的核心特性
export interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  variant?: 'primary' | 'secondary' | 'danger';
  disabled?: boolean;
  size?: 'sm' | 'md' | 'lg';
}

• 创建UI Context与Hook：

// context/UIContext.tsx
import { createContext, useContext, ReactNode } from 'react';
import { UIComponents } from '../types/ui';

export const UIContext = createContext<UIComponents | null>(null);

export const useUI = () => {
  const context = useContext(UIContext);
  if (!context) {
    throw new Error('useUI must be used within a UIProvider');
  }
  return context;
};

export const UIProvider = ({ children, components }: { children: ReactNode; components: UIComponents }) => {
  return (
    <UIContext.Provider value={components}>
      {children}
    </UIContext.Provider>
  );
};

• 适配不同UI库的组件：针对Mantine、MUI分别封装适配层，将统一Props映射为UI库原生Props：

// adapters/MantineAdapter.tsx
import { Button as MantineButton, Input as MantineInput } from '@mantine/core';
import { ButtonProps, InputProps, UIComponents } from '../types/ui';

// 适配Button的variant映射
const Button: React.ComponentType<ButtonProps> = ({ variant, ...rest }) => {
  const mantineVariant = variant === 'danger' ? 'red' : variant;
  return <MantineButton variant={mantineVariant} {...rest} />;
};

// Input直接复用统一Props（若Mantine原生Props兼容）
const Input: React.ComponentType<InputProps> = (props) => <MantineInput {...props} />;

export const mantineComponents: UIComponents = { Button, Input };

// adapters/MUIAdapter.tsx
import { Button as MUIButton, TextField as MUITextField } from '@mui/material';
import { ButtonProps, InputProps, UIComponents } from '../types/ui';

const Button: React.ComponentType<ButtonProps> = ({ variant, ...rest }) => {
  const muiVariant = variant === 'danger' ? 'contained' : variant;
  return <MUIButton variant={muiVariant} color={variant === 'danger' ? 'error' : 'primary'} {...rest} />;
};

const Input: React.ComponentType<InputProps> = (props) => <MUITextField {...props} />;

export const muiComponents: UIComponents = { Button, Input };

• 业务组件使用：通过useUI获取组件，完全与具体UI库隔离：

// components/LoginForm.tsx
import { useUI } from '../context/UIContext';
import { useForm } from '../hooks/useForm';

const LoginForm = () => {
  const { Button, Input } = useUI();
  const { values, handleChange, handleSubmit } = useForm({ username: '', password: '' });

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      handleSubmit(vals => console.log('Submit:', vals));
    }}>
      <Input 
        value={values.username}
        onChange={(e) => handleChange('username', e.target.value)}
        placeholder="Username"
        size="md"
      />
      <Input 
        type="password"
        value={values.password}
        onChange={(e) => handleChange('password', e.target.value)}
        placeholder="Password"
        size="md"
      />
      <Button variant="primary" type="submit" size="md">
        Login
      </Button>
    </form>
  );
};

• 切换UI库：在根组件中替换对应的适配器即可：

// index.tsx
import { UIProvider } from './context/UIContext';
import { mantineComponents } from './adapters/MantineAdapter';
// import { muiComponents } from './adapters/MUIAdapter'; // 切换为MUI时启用

ReactDOM.createRoot(document.getElementById('root')!).render(
  <UIProvider components={mantineComponents}>
    <App />
  </UIProvider>
);

2. 自定义Hook封装业务逻辑与UI分离 #

对于表单、弹窗这类带有复杂逻辑的UI元素，用自定义Hook封装核心逻辑，将UI渲染部分作为回调参数传入，彻底分离逻辑与UI实现：

// hooks/useModal.ts
import { useState } from 'react';

export const useModal = () => {
  const [isOpen, setIsOpen] = useState(false);

  const open = () => setIsOpen(true);
  const close = () => setIsOpen(false);

  return { isOpen, open, close };
};

业务组件中结合当前UI库的弹窗组件使用：

// components/DeleteConfirm.tsx
import { useUI } from '../context/UIContext';
import { useModal } from '../hooks/useModal';

const DeleteConfirm = ({ onConfirm }: { onConfirm: () => void }) => {
  const { Button, Modal } = useUI();
  const { isOpen, open, close } = useModal();

  return (
    <>
      <Button variant="danger" onClick={open}>Delete</Button>
      {isOpen && (
        <Modal title="Confirm Delete" onClose={close}>
          <p>Are you sure you want to delete this item?</p>
          <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
            <Button variant="secondary" onClick={close}>Cancel</Button>
            <Button variant="danger" onClick={() => {
              onConfirm();
              close();
            }}>Confirm</Button>
          </div>
        </Modal>
      )}
    </>
  );
};

3. 类型强化提升开发体验 #

在TypeScript环境下，通过类型继承确保统一Props与UI库原生Props的兼容性，避免适配层出现属性遗漏：

// 以Mantine Button为例，继承原生Props并覆盖需要统一的字段
type MantineButtonNativeProps = React.ComponentProps<typeof MantineButton>;
export interface ButtonProps extends Omit<MantineButtonNativeProps, 'variant'> {
  variant?: 'primary' | 'secondary' | 'danger';
}

这样既保留了UI库的原生能力，又通过统一字段实现了跨库切换的一致性。

内容的提问来源于stack exchange，提问作者F. F. Knob