Reactjs:警告:React.createElement:类型不应为空或未定义

Reactjs: Warning: React.createElement: type should not be null or undefined

这是完整的错误

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).

这就是我在这个视图中的全部内容

import React, { Component } from 'react';
import Router, {Link, RouteHandler} from 'react-router';
import { Grid, Row, Column, List, ListItem } from '../../components/Layout';
import { RaisedButton, Paper } from 'material-ui';

const videosInformation = {
  time      : 25,
  gameId    : 15665,
  date      : '12 10 2015',
  gameName  : "Black Jack"
};

export default class Home extends Component {

  static contextTypes = {
    router  : React.PropTypes.func
  }  

  render () {
    return <Grid>                   
      <Row>
        <Column>
          <Paper>
            <List subheader="Player Info">
              <ListItem primaryText={`Name: ${videosInformation.time}`} />
              <ListItem primaryText={`Nickname: ${videosInformation.date}`} />
              <ListItem primaryText={`Age: ${videosInformation.gameId}`} />
              <ListItem primaryText={`Language: ${videosInformation.gameName}`} />
            </List>
          </Paper>
        </Column>  
        <Column>
          <iframe width="560" height="315" src="https://www.youtube.com/embed/Ta4xuThmAsQ" frameBorder="0" allowFullScreen></iframe>
        </Column>
      </Row>
    </Grid>;
  };

}

我正在使用Material-UI

很可能您的 Layout 文件未从该行导出其中一个变量

import { Grid, Row, Column, List, ListItem } from '../../components/Layout';

如果其中之一未定义,则会出现警告。

我知道在这里找到了正确的解决方案,但我只是想分享触发 ReactJS React.createElement: type should not be null or undefined 警告的另一个可能原因。

当您的模块中存在循环依赖时,也会发生这种情况。然后,对导入的模块执行 console.log() 将 return 一个空对象。

有关更多详细信息,请查看其他 Whosebug 线程:Require returns an empty object

以防万一有人 运行 遇到这个问题并且上述解决方案没有帮助,我所要做的就是将我的顶级 ReactDOM.render() 函数移到其余部分下面JavaScript 以确保所有变量在被调用之前都已初始化。我正在学习 https://reactjs.net/getting-started/tutorial_aspnet4.html

上的教程