将mobx store中的字符串用作react组件名称？

import { observable } from 'mobx';

class Store {
  @observable componentName = 'ComponentA';
}

const store = new Store();
export default store;

import React from 'react';
import { observer } from 'mobx-react';
import store from './store';

const ComponentA = () => {
  return <div>Component A</div>;
};

const ComponentB = () => {
  return <div>Component B</div>;
};

const MainComponent = observer(() => {
  const { componentName } = store;

  const renderComponent = (componentName) => {
    switch (componentName) {
      case 'ComponentA':
        return <ComponentA />;
      case 'ComponentB':
        return <ComponentB />;
      default:
        return null;
    }
  };

  return <div>{renderComponent(componentName)}</div>;
});

export default MainComponent;