React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数

Question

当我尝试导入组件时，我从 react 中得到了这个神秘的错误。我收到的错误消息如下。不知道如何调试这个，感谢任何帮助。

未捕获的错误：元素类型无效：应为字符串（对于 内置组件）或类/函数（用于复合组件） 但得到：未定义。您可能忘记从 定义它的文件。检查App的渲染方法。

--- 我的 index.jsx

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import reducer from './reducers/reducer'

let store = createStore(reducer)

import App from './components/App'

ReactDOM.render(<App store={store}/>, document.getElementById('app')); 

-- 我的应用

import React, { Component } from 'react'
import { incrementCount } from '../actions/actionsOne'
import  CountWidgetContainer   from '../containers/CountWidgetContainer'

export default class App extends Component {

  render(){
    return (
      <div>
       <CountWidgetContainer store={this.props.store} />
      </div>
    )
  }
}

-- 容器组件

import React, { Component } from 'react'
import { INCREMENT_COUNTER } from '../actions/actionsOne'
import  CountWidget  from '../Components/CountWidget'

export default class CountWidgetContainer extends Component {

    constructor(props) {
     super(props)
      this.state = {
       count: props.store.getState()
      };
     this.handleChange = this.handleChange.bind(this);
     this.handleClick = this.handleClick.bind(this);
    }

   componentDidMount() {
      this.props.store.subscribe(this.handleChange)
   }

   handleChange() {
      this.setState({
        count: this.props.store.getState()
      })
   }

  handleClick() {
   let action = incrementCount()
    this.props.store.dispatch(action)
    console.log('action: ', action);
  }

  render() {
      return (
        <CountWidget count={this.state.count} handleClick={this.state.handleClick} />
      ) 
  }
}

Answer 1

import { CountWidgetContainer } from '../containers/CountWidgetContainer'

在这个组件中你使用export default所以，你不需要使用花括号。

就import CountWidgetContainer from '../containers/CountWidgetContainer';

并检查组件CountWidget 导出，如果它是默认的你也不应该在Container 中使用花括号。