
本文介绍了未捕获的错误:需要一个字符串.您忘记从其定义的文件中导出您的组件,或者您可能混淆了默认/命名导入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
你能帮我解决这个问题吗?我已经尝试解决导入函数,但我仍然遇到该错误,并且我还尝试删除无效的{}".提前致谢.我正在学习 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';
这篇关于未捕获的错误:需要一个字符串.您忘记从其定义的文件中导出您的组件,或者您可能混淆了默认/命名导入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!