React.createElement:类型不应为null或未定义

React.createElement: type should not be null or undefined

本文关键字:null 未定义 createElement 类型 React      更新时间:2023-09-26

以下是浏览器日志中显示的内容:

[HMR]正在等待WDS的更新信号。。。

ok路由器

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

ok数据包装

invariant.js:38未捕获的不变量冲突:元素类型无效:应为字符串(用于内置组件)或类/函数(用于复合组件),但得到:未定义。

[WDS]热模块更换已启用。

我的webpack入口文件app.jsx是:

import React from "react";
import Router from "react-router";
import ReactDOM from "react-dom";
import createBrowserHistory from 'history/lib/createBrowserHistory';
import router from "./router/router";
import DataWrapper from './container/DataWrapper';
if (process.env.BROWSER && process.env.NODE_ENV === 'development') {
  require('../../public/css/app.css');
}
let history = createBrowserHistory();
let data = JSON.parse(document.querySelector('#data').innerHTML);
ReactDOM.render(<DataWrapper data={data}><Router history = {history}>{router}</Router></DataWrapper>, document.querySelector('#app'));

DataWrapper.jsx是:

import React from 'react';
 class DataWrapper extends React.Component {
    constructor(props) {
        super(props);
    }
    getChildContext() {
        return {
            data: this.props.data
        };
    }
    render() {
        console.log("ok datawrapper");
        return this.props.children;
    }
}
DataWrapper.childContextTypes = {
    data: React.PropTypes.object.isRequired
};
export default DataWrapper;

router.jsx是:

import React from "react";
import {Route, IndexRedirect} from "react-router";
import Index from '../components/Index'
console.log("ok router");
export default(
  <Route path='/' component={Index}>
  </Route>
);

CCD_ 4为

import React from 'react';
class Index extends React.Component {
  constructor(props, context) {
    super(props, context);
  }
  render() {
    console.log("ok");
    return (
      <div style={{height: '100%'}}>
        hello world
        <div style={{display: 'none'}} id="data">{JSON.stringify(this.context.data)}</div>
      </div>
    );
  }
};
Index.propTypes = {
  location: React.PropTypes.object
};
Index.contextTypes = {
  data: React.PropTypes.object.isRequired
};
export default Index;

该警告似乎没有影响服务器渲染。console.log("ok")在服务器上工作。

最后我发现了react-router中不推荐使用的方法所引起的问题。

react-router 2.0中使用Routerhistory的正确方法是:

import {Router, browserHistory} from "react-router";
...
ReactDOM.render(<DataWrapper data={data}><Router history={browserHistory}>{router}</Router></DataWrapper>, document.querySelector('#app'));