Reactjs:警告:React.createElement:type不应为null或未定义

Question

这个完整的错误

警告:React.createElement:type不应为null或undefined.它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合组件).

这就是我在这个观点中所拥有的一切

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

Answer 1

您的Layout文件很可能不会从此行导出其中一个变量

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

如果其中一个未定义,则会发生警告.

Answer 2

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

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

有关更多详细信息,请查看此其他stackoverflow线程:Require返回一个空对象