你能帮我解决这个问题吗?我已经尝试解决导入函数,但我仍然收到该错误,我还尝试删除不起作用的"{}"。提前谢谢。我正在遵循TylerMcginnis React-Redux课程。导航.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>
)
}
主容器.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
错误:未捕获错误:元素类型无效:需要字符串(对于内置组件(或类/函数(对于复合组件(,但得到:未定义。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。 at 不变(invariant.js:42(
就我而言,我正在导入如下组件,因此我遇到了相同的错误。
import { Calculator } from './src/calculator';
为了修复它,我修改了导入,如下所示,它起作用了。
import Calculator from './src/calculator';
@Harsha我遇到了同样的错误。我花了一个小时左右的时间四处寻找,以确保我的代码是正确的,等等。我开始拆掉我拥有的代码,让它尽可能简单,然后更简单。
最后,问题是我已将一个空文件复制到我的组件目录中,但在另一个目录中的同名文件中编码。所以我导入了一个空文件。当然,它将是不确定的。 :(
另外,请记住输入分号。 ;)
对我来说也是如此。您可能没有保存文件。也许您正在保存 App.js 文件,而不是组件文件。我正在保存当前文件 (ctrl+S(,以为我正在保存所有文件......我正在使用VS Code,所以我转到文件/首选项/键盘快捷键,并将"全部保存"设置为ctrl + shift + S。
确保未导入和使用空白组件