如何根据下拉列表中的选择项动态组件

Question

我有一个简单的数组列表来填充下拉列表。 （这里我用过MenuItem） const li = [{value:'Names',text:'Names'},{value:'Assignments', text:'Assignments'},{value:'Todo',text:'To -Do'},{value:'Anything',text:'Anything'}];

根据用户从列表中选择的内容，我希望能够动态加载组件。 例如：名称然后我想加载

DynamicLoader.js 下面没有返回组件。 请有人帮忙。

下面我已经像这样对组件的道具进行了硬编码。 但它仍然无法正常工作。 <DynamicLoader 组件={'Assignments'} />

我如何使用 <DynamicLoader component={'Assignments'} /> 加载相同的内容

import React from 'react';

const DynamicLoader = ({component}) => {
    const COMPONENTS = {
        Names: require('./Names'),
        ToDo: require('./ToDo'),
        Assignments: require('./Assignments'),
        Anything: require('./Anything')
    }

    const Component = COMPONENTS[component];
    return (
      <Component />
    );
}

export default DynamicLoader;

import { FormControl, MenuItem, Select } from '@material-ui/core';
import React, { Fragment, useState  } from 'react';
import Anything from './Anything';
import Assignments from './Assignments';
import Names from './Names';
import ToDo from './ToDo';
import DynamicLoader from './DynamicLoader';


const li = [{value:'Names' ,text:'Names'},{value:'Assignments', text:'Assignments'},{value:'Todo',text:'To-Do'},{value:'Anything',text:'Anything'}];
const MainList = () => {
    const [selectedList, setSelectedList] = useState([]);
    
    const onListChange = async (event) => { 
        const selection = event.target.value;
        setSelectedList(selection);      
    }

    return (
        <div className="mainlist">        
            <div className="mainlist__header" >
                <h1>Create a list Unique to you.</h1>
                <Fragment>
                <FormControl className="mainlist__dropdown">
                    <Select variant="outlined" onChange={onListChange} value={selectedList}>
                    <MenuItem value="listmaker">List Maker Selection</MenuItem>
                    {
                        li.map(selected => (
                        <MenuItem  value={selected.value}>{selected.text}</MenuItem>
                    ))
                    }          
                    </Select>
                </FormControl>
                </Fragment>
        </div>
        <div>
        <div>
         <div>
        {
           (selectedList === 'Assignments' && <Assignments /> ) 
        || (selectedList === 'Names' && <Names /> )
        || (selectedList === 'Todo' && <ToDo /> )
        || (selectedList === 'Anything' && <Anything /> )
        || <p>Make a selection</p>
       }
       
        </div>
        </div>
      </div>
     
    );
};

export default MainList;