React -如何返回具有动态名称的组件？

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

const DynamicComponent = ({ componentName }) => {
  if (componentName === 'A') {
    return <ComponentA />;
  } else if (componentName === 'B') {
    return <ComponentB />;
  } else {
    return null; // 或者返回一个默认的组件或错误信息
  }
};

export default DynamicComponent;

import React, { useState } from 'react';
import DynamicComponent from './DynamicComponent';

const ParentComponent = () => {
  const [componentName, setComponentName] = useState('A');

  const handleButtonClick = () => {
    // 根据需要改变组件名称
    setComponentName('B');
  };

  return (
    <div>
      <button onClick={handleButtonClick}>切换组件</button>
      <DynamicComponent componentName={componentName} />
    </div>
  );
};

export default ParentComponent;