未捕获的错误:需要一个字符串.您忘记从其定义的文件中导出您的组件，或者您可能混淆了默认/命名导入 [英] Uncaught Error:expected a string. You forgot export your component from the file its defined,or you might have mixed up default/named import

问题描述

你能帮我解决这个问题吗?我已经尝试解决导入函数，但我仍然遇到该错误，并且我还尝试删除无效的{}".提前致谢.我正在学习 TylerMcginnis React-Redux 课程.导航.js

从 'react' 导入 React从'prop-types'导入PropTypes从react-router-dom"导入链接从'./styles.css'导入{容器，导航容器，链接}Navigation.propTypes = ActionLinks.propTypes = NavLinks.propTypes = {isAuthed: PropTypes.bool.isRequired,}功能导航链接({isAuthed}){返回 (isAuthed === true?<ul><li><Link to='/' className={link}>{'Home'}</Link></li>: <noscript/>)}功能动作链接({isAuthed}){返回 (isAuthed === true?<ul><li>新鸭子</li><li><Link to='/logout' className={link}>{'Logout'}</Link></li>:
<li><Link to='/' className={link}>{'Home'}</Link></li><li><Link to='/auth' className={link}>{'Authenticate'}</Link></li></ul>)}导出默认功能导航({isAuthed}){返回 (<div className={容器}><nav className={navContainer}><NavLinks isAuthed={isAuthed}/><ActionLinks isAuthed={isAuthed}/></nav>

)}

<小时>

MainContainer.js

从 'react' 导入 React从../../components/Navigation/Navigation"导入导航从'./styles.css' 导入 {container,innerContainer}从create-react-class"导入 createReactClassconst MainContainer = createReactClass({使成为 () {返回 (<div className={容器}><Navigation isAuthed={true}/><div className={innerContainer}>{this.props.children}

)},})导出默认 MainContainer

错误:未捕获的错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义.您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入.在不变 (invariant.js:42)

解决方案

就我而言，我正在导入如下组件，所以我遇到了同样的错误.

import { Calculator } from './src/calculator';

为了修复它，我修改了下面的导入并且它起作用了.

从'./src/calculator'导入计算器；

Could you please help me to resolve the issue. I have already tried resolving the import functions but i still get that error and I have also tried to remove "{}" which didnt work. Thanks in advance. I am following TylerMcginnis React-Redux course. Navigation.js

import React from 'react'
import PropTypes  from 'prop-types'
import Link  from 'react-router-dom'
import { container, navContainer, link } from './styles.css'

Navigation.propTypes = ActionLinks.propTypes = NavLinks.propTypes = {
  isAuthed: PropTypes.bool.isRequired,
}

function NavLinks ({isAuthed}) {
  return (isAuthed === true
    ? <ul>
        <li><Link to='/' className={link}>{'Home'}</Link></li>
      </ul>
    : <noscript />)
}

function ActionLinks ({isAuthed}) {
  return (isAuthed === true
    ? <ul>
        <li>NEW DUCK</li>
        <li><Link to='/logout' className={link}>{'Logout'}</Link></li>
      </ul>
    : <ul>
        <li><Link to='/' className={link}>{'Home'}</Link></li>
        <li><Link to='/auth' className={link}>{'Authenticate'}</Link></li>
      </ul>)
}

export default function Navigation  ({isAuthed}) {
  return (
    <div className={container}>
      <nav className={navContainer}>
        <NavLinks isAuthed={isAuthed} />
        <ActionLinks isAuthed={isAuthed} />
      </nav>
    </div>
  )
}

---

MainContainer.js

import React from 'react'
import  Navigation from '../../components/Navigation/Navigation'
import {container, innerContainer}  from './styles.css'
import createReactClass from 'create-react-class'


const MainContainer = createReactClass({
  render () {
    return (
      <div className={container}>
        <Navigation isAuthed={true} />
        <div className={innerContainer}>
          {this.props.children}
        </div>
      </div>
    )
  },
})

export default MainContainer

error: Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. at invariant (invariant.js:42)

解决方案

In my case, I was importing component as below so i was getting same error.

import { Calculator } from './src/calculator';

To fix it, i modified import as below and it worked.

import Calculator from './src/calculator';

这篇关于未捕获的错误:需要一个字符串.您忘记从其定义的文件中导出您的组件，或者您可能混淆了默认/命名导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！