React.createElement类型无效

Question

  

警告：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

我有一个object，我通过使用道具将其传递给另一个组件：

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>

但是当我这样做时，我遇到了问题，您可以在上面看到。通过使用另一个工作用例，是否有可能做到我想要的？

如果不清楚：

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

此属性与发生错误的data.component中的React.createElement相关

并查看data.component在console.log(data.component)中的样子：

组件/菜单/扩展面板/常规/ 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)