在React中按名称呈现动态组件

import React from 'react';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';
import ComponentC from './ComponentC';

const componentMapping = {
  ComponentA,
  ComponentB,
  ComponentC,
};

const getComponentByName = (componentName) => {
  const Component = componentMapping[componentName];

  if (!Component) {
    console.error(`Component "${componentName}" not found in the mapping.`);
    return null;
  }

  return <Component />;
};

import React, { useState } from 'react';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';
import ComponentC from './ComponentC';

const componentMapping = {
  ComponentA,
  ComponentB,
  ComponentC,
};

const getComponentByName = (componentName) => {
  const Component = componentMapping[componentName];

  if (!Component) {
    console.error(`Component "${componentName}" not found in the mapping.`);
    return null;
  }

  return <Component />;
};

const ParentComponent = () => {
  const [selectedComponentName, setSelectedComponentName] = useState('ComponentA');

  return (
    <div>
      <button onClick={() => setSelectedComponentName('ComponentA')}>Component A</button>
      <button onClick={() => setSelectedComponentName('ComponentB')}>Component B</button>
      <button onClick={() => setSelectedComponentName('ComponentC')}>Component C</button>

      {getComponentByName(selectedComponentName)}
    </div>
  );
};

export default ParentComponent;