Question

当我尝试导入组件时，我得到了这个可疑错误。我收到的错误信息如下。不知道如何调试这个，任何帮助表示赞赏。

未捕获错误：元素类型无效：需要一个字符串（for 内置组件）或类/函数（用于复合组件）但得到了：未定义。您可能忘记从中导出组件它定义的文件。检查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'

在此组件中您使用导出默认值，因此，您不需要使用大括号。

只需import CountWidgetContainer from '../containers/CountWidgetContainer';

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

React.createElement：type无效 - 期望一个字符串（对于内置组件）或类/函数

1 个答案: