未知错误：不变冲突：元素类型无效：期望字符串(用于内置组件)或类/函数，但get：object

Question

未知错误：不变冲突：元素类型无效：期望字符串(用于内置组件)或类/函数，但get：object

我得到了这个错误：

不变量错误：不变冲突：元素类型无效：预期字符串(用于内置组件)或类/函数(用于组合组件)，但get：Object。

这是我的密码：

var React = require('react')var ReactDOM =  require('react-dom')var Router = require('react-router')
var Route = Router.Routevar Link = Router.Linkvar App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    )
  }})var About = require('./components/Home')ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>), document.body)

我的Home.jsx档案：

var React = require('react');var RaisedButton = require('material-ui/lib/raised-button');var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label="Default" />
    );
  },});module.exports = Home;

Answer 1

就我而言(使用WebPack)这是以下两者之间的区别：import {MyComponent} from '../components/xyz.js';VSimport MyComponent from '../components/xyz.js';第二种方法起作用，而第一种则导致错误。或者相反。

Answer 2

您需要导出默认值或要求(路径)。var About = require('./components/Home').default

Answer 3

您是否刚刚模块化了您的任何反应组件？如果是，则如果忘记指定出口，例如：非模块化以前有效的组件/代码：var YourReactComponent = React.createClass({     render: function() { ...模块化组件/代码出口:module.exports = React.createClass({     render: function() { ...