dooring低代码图标组件踩坑

在formComponents中创建图标组件的时候，我一开始直接返回整个antd icon
例如：我直接返回这样的完整的一个icon，
在注册组件时也是直接设置如下

在编辑区的时候完全没有问题，

但是预览的时候出问题了
报错：Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

在preview中打印json，icon的确是返回了一个对象，所以react无法显示
向度娘了解了一番，开始重构
使用如下方法创建icon

import React from "react";
import * as Icon from "@ant-design/icons";
const MyIcon = (props:any) => {
    
    
    console.log(props,'props')
    return (
        React.createElement(
            Icon[props.icon],
        )
    )
};
export default MyIcon;

调用

<MyIcon icon={
    
    props.icon}/>

这样就可以直接传string类型即可

预览ok~~