react实现vue动态组件

2026-01-22 13:18:45VUE

React 实现类似 Vue 动态组件的功能

在 Vue 中，动态组件通过 <component :is="currentComponent"> 实现组件切换。React 可以通过以下方式模拟类似功能：

使用条件渲染

通过状态控制当前渲染的组件：

import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

function DynamicComponent() {
  const [currentComponent, setCurrentComponent] = useState('ComponentA');

  return (
    <div>
      {currentComponent === 'ComponentA' && <ComponentA />}
      {currentComponent === 'ComponentB' && <ComponentB />}
    </div>
  );
}

使用对象映射组件

更接近 Vue 的实现方式，通过对象映射组件名与组件：

const components = {
  ComponentA: ComponentA,
  ComponentB: ComponentB
};

function DynamicComponent() {
  const [currentComponent, setCurrentComponent] = useState('ComponentA');
  const ComponentToRender = components[currentComponent];

  return <ComponentToRender />;
}

动态加载组件

结合 React.lazy 实现按需加载：

const ComponentA = React.lazy(() => import('./ComponentA'));
const ComponentB = React.lazy(() => import('./ComponentB'));

function DynamicComponent() {
  const [currentComponent, setCurrentComponent] = useState('ComponentA');
  const ComponentToRender = currentComponent === 'ComponentA' ? ComponentA : ComponentB;

  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <ComponentToRender />
    </React.Suspense>
  );
}

传递 props

支持向动态组件传递 props：

function DynamicComponent({ componentName, ...props }) {
  const components = {
    ComponentA,
    ComponentB
  };
  const ComponentToRender = components[componentName];

  return <ComponentToRender {...props} />;
}

使用 children 实现插槽

模拟 Vue 的插槽功能：

function DynamicLayout({ component: Component }) {
  return (
    <div className="layout">
      <Component>
        <p>This content will be passed as children</p>
      </Component>
    </div>
  );
}

这些方法提供了在 React 中实现类似 Vue 动态组件功能的灵活选择，开发者可以根据具体场景选择最适合的方案。

react实现vue动态组件