未捕获的错误:期望字符串.您忘记了从其定义的文件中导出组件，或者您可能混淆了默认/命名导入 [英] 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课程.Navigation.js

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

---

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

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

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屋！