web-dev-qa-db-ja.com

Reactjs：警告：React.createElement：タイプはnullまたは未定義であってはなりません

これは完全なエラーです

警告：React.createElement：タイプはnullまたは未定義であってはなりません。文字列（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 を使用しています

javascriptreactjscreateelement
33
Non

Layoutファイルがこの行から変数の1つをエクスポートしていない可能性があります

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

これらのいずれかが未定義の場合、警告が発生します。

33
Ed Ballot

ここで適切な解決策が見つかったことは知っていますが、ReactJS _React.createElement: type should not be null or undefined_警告がトリガーされる別の考えられる理由を共有したかっただけです。

また、モジュールに循環依存関係がある場合にも発生する可能性があります。次に、インポートしたモジュールのconsole.log()を実行すると、空のオブジェクトが返されます。

詳細については、この他のstackoverflowスレッドを参照してください。 Requireは空のオブジェクトを返します

6
pjehan

誰かがこの問題に遭遇し、上記の解決策が役に立たない場合に備えて、トップレベルのReactDOM.render（）関数を残りのJavaScriptの下に移動して、呼び出される前にすべての変数が初期化されるようにするだけでした。 https://reactjs.net/getting-started/tutorial_aspnet4.html のチュートリアルに従っていました

2
Michael McAlpin