所以我目前正在构建一个react应用程序，并拥有从后端服务构建的动态数据。
我目前有一个模型定义如下：

interface ComponentNameProps {
   name:string;
}

interface IComponent {
    ref: string;
    componentName: ComponentNameProps
}

export default interface IListModel {
    // required by every component
    ref: string;
    component: FC<IComponent>;

字符串
在IListModel中，我需要呈现组件，因此在我的后端响应中，它看起来像下面的屏幕截图

的数据
如图所示，它显示了title.tsx组件，这是数据返回后Map到的组件，并在数据进入页面之前Map到该组件。
所以在psuedo代码中，我希望元素像这样呈现在页面上，但它似乎不工作，FC被分配给组件。我也试图添加React.ComponentType，但仍然没有乐趣。这是正确的方法吗？我似乎无法呈现组件

{componentList.map((item, index) => {
                            if(item) {
                       
                                const { componentName,  ref } = item;

                               
                                return (
                                    <componentName>abcde</componentName>
                                );
                            }
                        })}

型
任何帮助与此将是伟大的？