Question

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

[HMR]等待来自WDS的更新信号...

ok router

警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。

ok datawrapper

invariant.js：38 Uncaught Invariant Violation：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。

[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>
);

而Index.jsx是：

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")适用于服务器。

Answer 1

最后，我找出了date | sasasa date | sasasa 0[d][100] 1[a][97] 2[t][116] 3[e][101] SPACE4[ ][32] 5[|][124] 6[?][4294967234] 7[?][4294967200] 8[s][115] 9[a][97] 10[s][115] 11[a][97] 12[s][115] 13[a][97] 14[ ][10]中弃用方法导致的问题。

在react-router中使用Router和history的正确方法是：

react-router 2.0

React.createElement：type不应为null或undefined

1 个答案: