Reactjs React.createElement类型无效

警告：React.createElement:类型无效--应为字符串 （对于内置组件）或类/函数（对于复合 组件），但得到：。你不小心 导出JSX文本而不是组件

我有

LazyLoading

组件：

import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'

const LazyLoadingComponent = (
  {
    resolve,
    ...restProps
  }
) => {
  const [module, setModule] = useState(null)

  useEffect(() => {
    resolve().then((module) => {
      const View = module.default
      setModule(<View {...restProps} />)
    })
  }, [resolve])
  return (
    module && module
  )
}

LazyLoadingComponent.propTypes = {
  resolve: PropTypes.func.isRequired
}

export default LazyLoadingComponent

export const player = (params, intl) => {
  const symbol = addSymbol(params)

  return {
    pathname: sidebar.playersPathname,
    name: intl.formatMessage(messages.playerHeaderName),
    svg: <AccountCircle />,
    buttons: [
      {
        name: intl.formatMessage(messages.createPlayerButtonName),
        pathname: `${symbol}dialog=${dialogs.playerCreate}`
      }
    ],
    extensionPanel: [
      {
        name: sidebar.playersSearch,
        isExpanded: false,
        component: <LazyLoading resolve={() => import('components/Menu/ExpansionPanels/General/PlayerSearch')} />,
        subMenus: []
      },
      {
        name: sidebar.editPlayer,
        isExpanded: false,
        component: <LazyLoading resolve={() => import('components/Menu/ExpansionPanels/General/Summary')} />,
        subMenus: []
      }
    ]
  }
}

我有一些元素，我想展示这个

LazyLoading

组件，并向这个组件传递一些额外的道具：

<div>
  {
      React.craeteElement(data.component,{
          menuState,
          open: params.name === data.name
       })
   }
</div>

---

PlayerSearch文件js或jsx的扩展名是什么？我附上了这些信息。请检查一下播放器搜索文件js或jsx的扩展名是什么？我附上了这个信息。请检查一下

component: <LazyLoading resolve={() => import('components/Menu/ExpansionPanels/General/PlayerSearch')} />,

import React from 'react'
import PropTypes from 'prop-types'

import messages from '../messages'

import Search from '@material-ui/icons/Search'
import ArrowRight from '@material-ui/icons/ArrowRight'

import compose from 'hoc/compose'
import withIntl from 'hoc/withIntl'

import General from 'components/Menu/ExpansionPanels/General'

function PlayerSearch (
  {
    intl,
    open,
    menuState
  }
) {
  return (
    <General
      search={<Search />}
      message={intl.formatMessage(messages.playerSearch)}
      arrow={<ArrowRight />}
      open={open}
      menuState={menuState}
    />
  )
}

PlayerSearch.propTypes = {
  intl: PropTypes.object.isRequired,
  menuState: PropTypes.bool.isRequired,
  open: PropTypes.bool.isRequired
}

export default compose(
  withIntl()
)(PlayerSearch)