Недопустимый тип React.createElement - PullRequest
Новая
       8

Недопустимый тип React.createElement

0 голосов
/ 04 мая 2019

Предупреждение: 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): enter image description here

компоненты / Меню / Панели расширения / Общие / Поиск игрока: 

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)
...