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

在React中，根据名称动态呈现组件涉及到使用条件渲染和组件映射

1. 首先，创建一个函数组件映射对象。键是组件名称，值是组件：

import React from 'react';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';
import ComponentC from './ComponentC';
const componentMapping = {
  ComponentA,
  ComponentB,
  ComponentC,
};

1. 创建一个函数，接收组件名称并返回相应的组件：

const getComponentByName = (componentName) => {
  const Component = componentMapping[componentName];
  if (!Component) {
    console.error(`Component "${componentName}" not found in the mapping.`);
    return null;
  return <Component />;
};

1. 使用 getComponentByName 函数动态呈现组件。例如，您可以在父组件中使用它：

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 (
      <button onClick={() => setSelectedComponentName('ComponentA')}>Component A</button>
      <button onClick={() => setSelectedComponentName('ComponentB')}>Component B</button>
      <button onClick={() => setSelectedComponentName('ComponentC')}>Component C</button>