react实现vue动态组件

React 实现 Vue 动态组件功能

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

使用动态组件名渲染

通过组件名映射对象和状态管理实现动态渲染：

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

const componentMap = {
  ComponentA,
  ComponentB
};

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

  const ComponentToRender = componentMap[currentComponent];

  return (
    <div>
      <button onClick={() => setCurrentComponent('ComponentA')}>Show A</button>
      <button onClick={() => setCurrentComponent('ComponentB')}>Show B</button>
      <ComponentToRender />
    </div>
  );
}

通过 props 传递组件

可以直接将组件作为 props 传递实现动态渲染：

function DynamicRenderer({ component: Component }) {
  return <Component />;
}

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

  return (
    <div>
      <button onClick={() => setCurrentComponent(ComponentA)}>Show A</button>
      <button onClick={() => setCurrentComponent(ComponentB)}>Show B</button>
      <DynamicRenderer component={currentComponent} />
    </div>
  );
}

使用 React Router 实现动态路由组件

通过路由参数动态加载不同组件：

import { Route, useParams } from 'react-router-dom';

const componentMap = {
  'page-a': ComponentA,
  'page-b': ComponentB
};

function DynamicRouteComponent() {
  const { componentId } = useParams();
  const Component = componentMap[componentId] || FallbackComponent;

  return <Component />;
}

// 路由配置
<Route path="/:componentId" component={DynamicRouteComponent} />

动态导入组件实现按需加载

结合 React.lazy 和 Suspense 实现动态导入：

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

function LazyComponent() {
  const [currentComponent, setCurrentComponent] = useState(null);

  const loadComponent = async (name) => {
    const Component = name === 'A' ? ComponentA : ComponentB;
    setCurrentComponent(Component);
  };

  return (
    <Suspense fallback={<div>Loading...</div>}>
      {currentComponent && <currentComponent />}
    </Suspense>
  );
}

使用高阶组件封装动态逻辑

创建高阶组件处理动态渲染逻辑：

function withDynamicRender(WrappedComponent, componentMap) {
  return function(props) {
    const [current, setCurrent] = useState(Object.keys(componentMap)[0]);
    const DynamicComponent = componentMap[current];

    return (
      <div>
        <WrappedComponent onSelect={setCurrent} {...props} />
        <DynamicComponent />
      </div>
    );
  };
}

这些方法提供了在 React 中实现类似 Vue 动态组件功能的多种途径，可以根据具体场景选择最适合的实现方式。